在Bootstrap 4 中，在桌面和行動視圖之間切換時自訂列的排列可能有點棘手。讓我們解決一個特定的場景：您有兩列，右列中有一個巢狀行。您的目標是讓版面具有響應性，使其顯示如下：
桌面版本：
--------- ------ | 2 || 1 | | || | | |------- | || 3 | | || | | |------- | | | | ---------
行動版本（依序堆疊）：
-------- | 1 | | | -------- | 2 | | | | | | | | | | | -------- | 3 | | | --------
Bootstrap 4 中的預設 Flexbox 版面配置可確保列的高度相等。若要實現所需的桌面佈局，您可以為大螢幕停用 Flexbox 並使用浮動：
<div class="container">
<div class="row d-flex d-lg-block">
<div class="col-lg-8 order-1 float-left">
<div class="card card-body tall">2</div>
</div>
<div class="col-lg-4 order-0 float-left">
<div class="card card-body">1</div>
</div>
<div class="col-lg-4 order-1 float-left">
<div class="card card-body">3</div>
</div>
</div>
</div>或者，您可以採用利用 w 的 Flexbox Wrapping Hack -auto:
<div class="container">
<div class="row">
<div class="col-lg-8 order-1">
<div class="card card-body">2</div>
</div>
<div class="col-lg-4 order-0">
<div class="card card-body w-auto">1</div>
</div>
<div class="col-lg-4 order-1">
<div class="card card-body w-auto">3</div>
</div>
</div>
</div>兩種方法有各自的優點和缺點。浮動方法更簡單，但可能會導致對齊和響應能力問題。包裝駭客提供了更好的回應能力，但需要更複雜的 CSS。
以上是如何針對桌面和行動視圖以不同的方式重新排序 Bootstrap 欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
