How can I reverse the order of columns in Bootstrap 4?

Solution 1:

If you want to change order on md and larger sizes you can use order-md-, this is provided by bootstrap. It looks like, if you want to change order only on md size you will have to define normal order on one larger size Fiddle

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-12 order-md-2">A</div>
  <div class="col-md-12 order-md-1">B</div>
</div>

Solution 2:

It's also possible to use the flex- helper classes to solve this issue. This solution allows you to reverse the order without the order count on the columns.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-column-reverse flex-lg-row">
  <div class="col-md-12 col-lg-6 col-xl-7">A</div>
  <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

The flex-direction is now reversed by default (md) and will be overriden on the lg breakpoint.