使用推/拉和 col-md-12 在 Bootstrap 4 中进行列排序

Question

我有两列 col-md-12 每列。

在桌面视图中，它们应该显示如下：

 Col **1**
Col **2**

在移动视图中应该显示如下：

 Col **2**
Col **1**

这甚至可以通过 Bootstrap 的列排序实现吗？

我当前的代码：

 <div class="row">
    <div class="col-xs-push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>

原文由 Cray 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新（2018 年 2 月）- v4+

现在引导程序已经发布，您可以使用 order 实用程序类来实现，就像您在测试版中所做的那样（请参阅下面的旧更新），不同之处在于他们添加了这 3 个新类:

 .order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

---

片段

 .p-2 {
  background: red;
  border: white 5px solid
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-first order-lg-2">2</div>
</div>

---

旧更新（2017 年 10 月）- v4.0.0 测试版

随着 beta 版本的发布，您可以使用 bootstrap 中的 flexbox 实用程序来执行此操作，例如 flex-order

（请参阅@ZimSystem 的回答 - 查看 alpha 版本的解决方案）

 .p-2 {
  background: red;
  border: white 5px solid
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-1 order-lg-2">2</div>
</div>

原文由 dippas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2021 年更新 - Bootstrap 5 测试版

order-* 以同样的方式分类工作……

 <div class="row">
        <div class="col-md-12">
            Col 1
        </div>
        <div class="col-md-12 order-first order-md-0">
            Col 2
        </div>
    </div>

演示引导程序 5

2019 年更新 - Bootstrap 4.3+

现在全宽，12 个单元 col-*-12 列可以使用 flexbox 顺序反转。

在较旧的 Bootstrap 4 alpha 和 beta 版本中，排序实用程序是 flex-* …

 <div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

演示 Bootstrap 4 Alpha

从 Bootstrap 4.0.0 开始，排序实用程序是 order-* …

 <div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 order-first order-md-2">
        Col 2
    </div>
</div>

演示引导程序 4.1.0

请参阅 https://getbootstrap.com/docs/4.0/layout/grid/#order-classes 上的文档

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议