如何在桌面上實現一個較高的 Div 旁邊有兩個較短的 Div，並在行動裝置上堆疊？

桌面上一個較高的Div 緊鄰兩個較短的Div，並在行動裝置上堆疊

問題：

問題：

問題：

• 問題：
實現以下佈局：三個div 在行動裝置上堆疊在一起，但在較大的螢幕上並排顯示（桌面）。

解決方案：

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

解決方案包括在較寬的螢幕上停用Flexbox 行為並使用浮動來允許較短的div（B 和C）自然對齊右邊的。在行動裝置上，flexbox order 屬性用於對div 重新排序，如下所示：桌面：A-B-C行動裝置：B-A-C行動裝置：B-A-C 代碼:

以上是如何在桌面上實現一個較高的 Div 旁邊有兩個較短的 Div，並在行動裝置上堆疊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！