如何使用 Bootstrap 4 在桌面上將一個較高的 Div 排列在兩個較短的 Div 旁邊並在行動裝置上堆疊它們？

桌面上一個高的Div 緊鄰兩個較短的Div，並使用Bootstrap 4 在行動裝置上堆疊

理解問題：

與引用的問題類似，此場景涉及從桌面切換到行動裝置時重新排序三個div。在桌面上，這些 div 應並排排列，而在行動裝置上，它們應垂直堆疊。提供的圖像清楚地說明了所需的佈局。

解決方案：

要實現此佈局，我們必須針對較大寬度停用 Bootstrap 4 的預設 Flexbox 行為。透過這樣做，柱子的高度將不再受到限制。相反，我們可以使用 float 屬性使 B 和 C 列自然向右對齊，因為 A 較高。

實作順序：

重新排序在行動裝置上的欄位中，我們利用Bootstrap 4 提供的順序實用程式類別：

• 桌面（較大寬度）：A-B-C
• 行動裝置：B-A-C

以下是實作此方法的程式碼片段：

<div class="container-fluid">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-6 order-1 float-left">
            A
        </div>
        <div class="col-lg-6 order-0 float-left">
            B
        </div>
        <div class="col-lg-6 order-1 float-left">
            C
        </div>
    </div>
</div>

此解決方案有效地按預期重新排序div，在桌面和行動裝置上提供特定佈局。

以上是如何使用 Bootstrap 4 在桌面上將一個較高的 Div 排列在兩個較短的 Div 旁邊並在行動裝置上堆疊它們？的詳細內容。更多資訊請關注PHP中文網其他相關文章！