列排序引导程序答案

【问题标题】：Column ordering bootstrap列排序引导程序
【发布时间】：2019-05-05 23:44:22
【问题描述】：

我有一个这样的引导布局：

<div class="row">
    <div class="col-md-2">
    1
    </div>
    <div class="col-md-8">
    2
    </div>  
    <div class="col-md-2">
    3
    </div>
</div>

看起来像这样：

1 2 3

在移动设备上，第 1 列在顶部，这是我想要的，但我希望第 3 列出现在第二个，然后第 2 列出现在第三个。

这可能吗？

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

您可以使用 bootstrap (https://getbootstrap.com/docs/4.1/utilities/flex/#order) 定义的类，如下所示

.row > div {
 border:2px solid;
 text-align:center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-2 order-0 order-md-0">
      1
    </div>
    <div class="col-md-8 order-2 order-md-1">
      2
    </div>
    <div class="col-md-2 order-1 order-md-2">
      3
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

在 Bootstrap 4 中，网格是用 Flexbox 完成的，所以你可以使用 order

@media screen and (max-width: 768px) {
    .col-md-2 {
        order: 1;
    }
    .col-md-8 {
        order: 2;
    }
}

演示：https://jsfiddle.net/o4ab1wrq/

另见：https://developer.mozilla.org/de/docs/Web/CSS/order

【讨论】：