** Bootstrap 5（2021年更新）**

由于在Bootstrap 5中仍然使用flexbox，因此更改列的顺序也是一样的。但是order-6到order-12已经被删除。这些类现在可以在Bootstrap 5中重新排序。

• 顺序-{breakpoint}-第一个
• 订单-{breakpoint}-最后一个
• 订单-{断点}-0
• 订单-{断点}-1
• 订单-{断点}-2
• 订单-{断点}-3
• 订单-{断点}-4
• 订单-{断点}-5

可能的{断点}值为无（对于xs）、sm、md、lg、xl或xxl
Bootstrap 5 order examples

** Bootstrap 4（2018年更新）**

不需要额外的CSS。使用flexbox排序工具...
演示：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>

排序类现在是order-first、order-1、order-2等...
https://codeply.com/go/DYHIdw8TXH
另一种方法是使用flexbox方向工具...

<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

查看此更新的JSFiddle. https://jsfiddle.net/bq1L3gax/5/
您需要做的就是使用CSS order属性。

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