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 訂購演示