如何在行動裝置上堆疊 Bootstrap 4 Div 並在桌面上並排排列它們？

使用Bootstrap 4 重新定位div：在行動裝置上堆疊，在桌面上並排

您想要在行動裝置上重新排序Bootstrap div，並將它們並排放置在

解決方案：

1. 停用Flexbox 以實現更大的寬度：
   Bootstrap 4 的Flexbox 為列分配相同的高度。為了防止這種情況，請對大於中等寬度的寬度停用 Flexbox。

<div>

2. 使用較小寬度的浮動（行動裝置）：
   啟用列浮動以允許第二列和第三列（B 和C）包裹在第一列下方(A).

        <div>

3. 分配列順序：
   使用order- 實用程式類別在行動裝置上對列重新排序。在本例中，將第一列的順序設為 1 (order-1)，將第二列的順序設為 0 (order-0)。這會將 A 放置在行動裝置上的 B 下方，同時在桌面上保持其並排排列。

        <div>

此解決方案實現了所需的佈局，A 列保持完整高度，B 列和C 在行動裝置上堆疊在下方。

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