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>
由于新版本 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>