如何重新排序 Bootstrap 4 Div：在桌面上並排，在行動裝置上堆疊？

使用 Bootstrap 4 重新排序 Div：桌面上較高的 Div 與較短的 Div相鄰並在行動裝置上堆疊

您的目標是在一個網頁，在桌面裝置上並排顯示它們並在行動裝置上堆疊顯示

要實現此目的，您需要覆寫Bootstrap 4 的Flexbox 行為，這會導致列具有相同的高度。對於更大的寬度，您應該停用彈性盒。然後，您可以使用浮動來確保第二列和第三列（B 和 C）自然向右浮動，因為第一列 (A) 較高。

要在行動裝置上完成重新排序，利用彈性盒 order- 屬性。這將確保列以所需的順序顯示。

程式碼片段：

<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>

在此範例中，order-1 和 float-left CSS 類別確保桌面裝置上的所需排列。在行動裝置上，d-flex 類別被禁用，允許三個 div 垂直堆疊。

以上是如何重新排序 Bootstrap 4 Div：在桌面上並排，在行動裝置上堆疊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！