如何重新排序 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中文网其他相关文章！