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

不需要额外的CSS 。使用flexbox ordering utils ...

演示：https://www.codeply.com/go/nEpPysXuNe

更新2018 Bootstrap 4（4.0.0）

<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://www.codeply.com/go/DYHIdw8TXH

另一种方法是使用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://www.codeply.com/go/bi01mV3n0n

Answer 2

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

您需要做的就是使用CSS template <typename T> X(T &&) -> const X<std::remove_reference_t<X>>;属性。

order

Bootstrap 4改变列的顺序

2 个答案: