css - Bootstrap change order of columns

Question

How can I change the order of columns for Bootstrap 4's flexbox grid system?

Code I have:

<div class="contents">
  <div class="row row-1">
    <div class="col-sm-6">Content Left</div>
    <div class="col-sm-6">Content Right</div>
  </div>
  <div class="row row-2">
    <div class="col-sm-6">Content Right</div>
    <div class="col-sm-6">Content Left</div>
  </div>
  <div class="row row-3">
    <div class="col-sm-6">Content Left</div>
    <div class="col-sm-6">Content Right</div>
  </div>
  <div class="row row-4">
    <div class="col-sm-6">Content Right</div>
    <div class="col-sm-6">Content Left</div>
  </div>
</div>

I want to set it so that every even row would have it's columns orders reversed. CSS I have so far:

.row:nth-child(2n) .col-sm-6:first-child{
   float:right;
}

JSFiddle: https://jsfiddle.net/bq1L3gax/

Answer 1

Bootstrap 5 (update 2021)

Since flexbox is still used in Bootstrap 5, changing the order of columns works in the same way. However the order-6 to order-12 have been dropped. These classes are now available for re-ordering in Bootstrap 5..

• order-{breakpoint}-first
• order-{breakpoint}-last
• order-{breakpoint}-0
• order-{breakpoint}-1
• order-{breakpoint}-2
• order-{breakpoint}-3
• order-{breakpoint}-4
• order-{breakpoint}-5

The possible {breakpoint} values are none(for xs), sm, md, lg, xl or xxl

Bootstrap 5 order examples

---

Bootstrap 4 (update 2018)

There's no need for extra CSS. Use the flexbox ordering utils...

Demo: https://codeply.com/go/nEpPysXuNe

<div class="contents">
  <div class="row row-1">
    <div class="col-sm-6">Content Left</div>
    <div class="col-sm-6">Content Right</div>
  </div>
  <div class="row row-2">
    <div class="col-sm-6">Content Right</div>
    <div class="col-sm-6 order-first">Content Left</div>
  </div>
  <div class="row row-3">
    <div class="col-sm-6">Content Left</div>
    <div class="col-sm-6">Content Right</div>
  </div>
  <div class="row row-4">
    <div class="col-sm-6">Content Right</div>
    <div class="col-sm-6 order-first">Content Left</div>
  </div>
</div>

The ordering class are now order-first, order-1, order-2, etc...

https://codeply.com/go/DYHIdw8TXH

---

Another method is using the flexbox direction utils...

<div class="row flex-row-reverse flex-md-row">
    <div class="col-6">A</div>
    <div class="col-6">B</div>
</div>

https://codeply.com/go/bi01mV3n0n