Bootstrap 4 列顺序

使用推拉类可以在 Bootstrap 3 中更改顺序（或位置）。在 Bootstrap 4 中，推拉类仍然有效，另外还可以使用 flexbox 命令。

在引导 4，推拉力类是现在 push-{viewport}-{units} 和 pull-{viewport}-{units} 和 xs- 缀已被删除。考虑这个示例，将 xs 和 sm 上的列顺序更改为 1-3-2 布局：

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

Bootstrap 4 推拉演示

由于新版本 4 是 flexbox，另一种选择是使用 flexbox 实用程序类来更改列的顺序。现在全宽，12 个单位 col-*-12 列可以使用 flexbox 订购进行反转。

<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>

Flexbox 订购演示