如何在行動裝置上響應式地重新排序 Bootstrap 元素？

透過移動重新排序響應式地對Bootstrap 元素進行排序

在Bootstrap 中，管理列順序對於響應式佈局至關重要。然而，在行動裝置上實現所需的順序有時會帶來挑戰。

初始代碼：

問題：

此程式碼在行動裝置上產生以下順序：1, 3, 2，而不是所需的1, 2, 3.

解 1：在大螢幕上停用 Flexbox

Bootstrap 使用 Flexbox，它強制執行相等的列高。若要在行動裝置上重新排列列，可以在大螢幕（例如桌面）上停用 Flexbox。

解決方案2：具有自動寬度的Flexbox Wrap Hack

另一個選項涉及使用具有自動列寬的Flexbox 換行技巧（w-auto） 。

其他資源：

• [Bootstrap 回應列高度](https://www.w3resource.com/twitter-bootstrap /responsive-columns-height .php)
• [如何修復意外的列Bootstrap 4中的順序？ ](https://stackoverflow.com/questions/48509758/how-to-fix-unexpected-column-order-in-bootstrap-4)

以上是如何在行動裝置上響應式地重新排序 Bootstrap 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！