如何為行動優先佈局重新排序 Bootstrap 3 列？

在行動佈局中重新排序Bootstrap 3 欄位

問題：

響應式版面具有固定的導覽列和兩列其下方：側邊欄和主要內容。雖然佈局在桌面上按預期運行，但在行動裝置上，側邊欄堆疊在主要內容的頂部，將其置於不需要的位置。在行動裝置上所需的順序是先顯示主要內容，然後是側邊欄。

答案：

在 Bootstrap 中直接更改行動裝置上的列順序是不可行的3. 但是，解決方法是利用 Bootstrap的響應式列重新排序功能來處理大型資料

步驟：

1. 重新排列HTML 中的列順序，將主要內容放在前面：

2. 預設情況下，即使在行動裝置上，這些類別也會先顯示主要內容
3. 類別col-lg-push-3 將主要內容向右推三列，而col-lg- pull-9 將側邊欄向左拉九列，從而獲得所需的順序大螢幕。

說明：

在 Bootstrap 中，列可以是使用 col-push 和 col-pull 重新定位特定的螢幕尺寸。透過對大螢幕使用 col-lg-push 和 col-lg-pull，列將在這些螢幕上採用指定的順序，同時在較小的裝置上保持原始順序。

以上是如何為行動優先佈局重新排序 Bootstrap 3 列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！