相关疑难解决方法(0)

如何更改 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/

我尝试使用twitter bootstrap实现以下功能:

在除"额外小"之外的所有屏幕上,布局应如下所示:

在"超小"设备上它应该是这样的

我已经尝试过这个灵魂用Twitter Bootstrap响应重新排序div？,但它不起作用,因为"B"与"A"和"C"之间没有"rowspan".

这意味着如果"B"大于"A",则"A"和"C"之间存在间隙.有没有办法实现这个目标？

最好的祝福