Bootstrap 更改列的顺序

Question

如何更改 Bootstrap 4 的 flexbox 网格系统的列顺序？

我有代码：

<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>

我想设置它，以便每个偶数行的列顺序颠倒。到目前为止我拥有的 CSS：

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

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

Answer 1

Bootstrap 5（2021 年更新）

由于 flexbox 仍在 Bootstrap 5 中使用，因此更改列的顺序以相同的方式工作。然而，order-6toorder-12已被删除。这些类现在可用于在 Bootstrap 5 中重新排序。

• order-{断点}-first
• 订单-{断点}-最后
• 订单-{断点}-0
• 订单-{断点}-1
• 订单-{断点}-2
• 订单-{断点}-3
• 订单-{断点}-4
• 订单-{断点}-5

可能的 {breakpoint} 值为 none（对于 xs）sm、md、lg、xl或xxl

Bootstrap 5 订单示例

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 方向 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

Answer 2

查看这个更新的 JSFiddle。https://jsfiddle.net/bq1L3gax/5/

您所需要做的就是使用 CSSorder属性。

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