如何在行動佈局上反轉 Bootstrap 3 列順序？

在行動版面配置中重新排序 Bootstrap 3 欄位

設計響應式版面時，通常需要調整較小螢幕上的列順序。本文解決了在 Bootstrap 3 行動佈局中更改列順序的具體問題，其中側邊欄列目前堆疊在主要內容列的頂部。

問題：

我有一個帶有導航列、側邊欄和主要內容的響應式佈局。在桌面上，版面配置顯示為：

navbar
[3][9]

但是，在行動裝置上，版面配置變更為：

navbar
[3]
[9]

我想將行動裝置上的順序反轉為：

navbar
[9]
[3]

解：

雖然不是可以使用Bootstrap 內建的網格系統直接更改行動裝置上的列順序，有一個解決方法。透過反轉 HTML 程式碼中列的順序，您可以操縱它們在不同螢幕尺寸上的顯示方式。

在這種情況下，我們有：

<div>
<p>要反轉順序移動設備，將其更改為：</p>
<pre class="brush:php;toolbar:false"><div>
<p>預設情況下，即使在行動裝置上，也會先顯示主要內容。 col-lg-push 和 col-lg-pull 類別用於在較大螢幕尺寸上對列重新排序，確保側邊欄保留在左側，主要內容保留在右側。 </p>
<p><strong>注意：</strong> 此解決方案僅適用於大螢幕尺寸（例如筆記型電腦）。在較小的螢幕上，列仍將按照 Bootstrap 的預期堆疊。 </p>
</div>