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

實作 Bootstrap 3 行動佈局的列重新排序

Bootstrap 提供了一個強大的網格系統來建立響應式佈局。但是，它缺乏為移動佈局明確更改列順序的能力。本文探討了實現列重新排序的替代方法。

問題：

使用者正在建立一個帶有頂部導覽列和兩列（側邊欄和內容）的響應式佈局。當螢幕大小調整為移動佈局時，側邊欄會堆疊在內容之上，而不是直接顯示在內容下方。目標是重新排列行動裝置上的列順序，使主要內容位於頂部。

解決方案：

雖然無法直接更改列對於移動螢幕，有一個使用推和拉類的解決方法。

代碼說明：

要優先顯示主要內容，請更改列的順序，如下所示：

此修改將主要內容向右移動3 列和側邊欄在大螢幕上向左移動9 列。然而，在較小的螢幕中，預設的列順序保持不變，導致主要內容在頂部達到所需的佈局。

側邊欄的其他注意事項：

如果您喜歡在展開的導覽列中顯示側邊欄，請考慮以下事項：

• 展開選單以垂直堆疊內容，而不是
• 預設隱藏側邊欄，並在選單啟動時使用JavaScript顯示它。

結論：

使用推和拉類，您可以有效地為大螢幕重新排序列。對於更複雜的列佈局或移動重新排序，請探索替代解決方案，例如響應式網格或 CSS Flexbox。

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