通过 Bootstrap4 对列进行排序

Question

我有 3 列我想在桌面和移动设备上以不同的方式订购。

目前，我的网格如下所示：

 <div class="row">
  <div class="col-xs-3 col-md-6">
    1
  </div>
  <div class="col-xs-3 col-md-6">
    2
  </div>
  <div class="col-xs-6 col-md-12">
    3
  </div>
</div>

在移动视图中，我想要以下输出：

 1-3-2

不幸的是，我不知道如何使用 Bootstrap 4 中的 .col-md-push-* 和 .col-md-pull-* 类来解决这个问题。

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

Answer 1

2021 - 引导程序 5

响应式排序类现在是 order-first , order-last 和 order-0 - order-5

演示

2018 - 引导程序 4

响应式 排序类 现在是 order-first 、 order-last 和 order-0 - order-12

Bootstrap 4 **push** **pull** 类现在是 `push-{viewport}-{units}` 和 `pull-{viewport}-{units}` 并且 `xs-` 中缀已被删除。要在 mobile/xs 上获得所需的 1-3-2 布局，请执行以下操作：[Bootstrap 4 push pull demo](http://www.codeply.com/go/OmrcmepbUp) （仅适用于 4.0 beta 之前）

---

引导 4.1+

由于 Bootstrap 4 是 flexbox，因此很容易更改列的顺序。 The cols can be ordered from order-1 to order-12 , responsively such as order-md-12 order-2 (last on md , 2nd on xs ) 相对于父 .row 。

 <div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

演示： 使用 order-* 类更改订单

桌面（大屏幕）：

移动设备（小屏幕）：

也可以使用 flexbox 方向工具 更改列顺序…

 <div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

演示： Bootstrap 4.1 带有 Flexbox 方向的变更单

---

旧版本演示

演示 - 阿尔法 6

演示 - 测试版 (3)

查看更多 Bootstrap 4.1+ 订购演示

---

有关的

Bootstrap 4 中的列排序，带有推/拉和 col-md-12

Bootstrap 4更改列的顺序

ACB ABC

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

Answer 2

这也可以通过 CSS“Order”属性和媒体查询来实现。

是这样的：

 @media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

CodePen 链接： https ://codepen.io/preston206/pen/EwrXqm

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