如何在桌面上实现一个较高的 Div 旁边有两个较短的 Div，并在移动设备上堆叠？

桌面上一个较高的 Div 紧邻两个较短的 Div，并在移动设备上堆叠

问题：

实现以下布局：三个 div 在移动设备上堆叠，但在较大的屏幕（桌面）上并排显示。

解决方案：

解决方案涉及在更宽的屏幕上禁用 Flexbox 行为并使用浮动来允许较短的 div（B 和 C）自然地向右对齐。在移动设备上，flexbox order 属性用于对 div 重新排序，如下所示：

• 桌面：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 旁边有两个较短的 Div，并在移动设备上堆叠？的详细内容。更多信息请关注PHP中文网其他相关文章！