Bootstrap 4, how reverse the order of columns?

Answer 1

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.

Answer 2

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>

Answer 3

For Bootstrap v4.1 you can use

<div class="row flex-row-reverse">
    <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>

More information here: https://getbootstrap.com/docs/4.1/utilities/flex/#direction

Answer 4

Easiest solution will be:

.row{
    flex-direction: row-reverse;
}