如何在移动设备上堆叠 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中文网其他相关文章！