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

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

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

解決方案：

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

<div>
<ol start="2"><li>
<strong>使用較小寬度的浮動（行動裝置）：</strong><br>啟用列浮動以允許第二列和第三列（B 和C）包裹在第一列下方(A).</li></ol>
<pre class="brush:php;toolbar:false">        <div>
<ol start="3"><li>
<strong>分配列順序：</strong><br>使用order- 實用程式類別在行動裝置上對列重新排序。在本例中，將第一列的順序設為 1 (order-1)，將第二列的順序設為 0 (order-0)。這會將 A 放置在行動裝置上的 B 下方，同時在桌面上保持其並排排列。 </li></ol>
<pre class="brush:php;toolbar:false">        <div><p>此解決方案實現了所需的佈局，A 列保持完整高度，B 列和C 在行動裝置上堆疊在下方。 </p></div>