Bootstrap 4 列顺序

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

在引导 4,推拉力类是现在 push-{viewport}-{units}pull-{viewport}-{units}xs- 缀已被删除。考虑这个示例,将 xssm 上的列顺序更改为 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 订购演示