如何在行動裝置響應式Bootstrap中實作自訂列排序？

行動裝置上的響應式Bootstrap 列排序

在設計響應式佈局時，請確保不同螢幕尺寸上所需的列順序可能具有挑戰性。此問題解決了在行動裝置上與大螢幕上以不同方式排列嵌套列佈局的具體情況。

問題：

開發人員有一個包含兩列的佈局以及右側列中的巢狀行。目標是在行動裝置上以以下順序顯示欄位：

|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

但是，目前程式碼會導致行動裝置上的 1-3-2 順序不正確。

解決方案：

解決方案涉及停用較大螢幕尺寸的 Flexbox 並使用浮動在行動裝置上實現所需的佈局。以下程式碼示範了這種方法：

<div>

工作原理：

• 在較大螢幕上停用Flexbox： d - flex d-lg-block 實用程式類別在小於lg 的螢幕上啟用Flexbox，但在lg 及以上螢幕上停用它。
• 在行動裝置上使用浮動： 停用 Flexbox 時，float-left 公用程式用於列上以將它們並排放置。
• 使用order-* 重新排序: 在行動裝置上（啟用Flexbox 時），order-* 實用程式類別用於重新排序

替代解決方案：

正如提供的答案中提到的，另一個潛在的解決方案涉及使用w-auto 的Flexbox 包裝hack。這種方法涉及在列上設定自動寬度，允許它們在行動裝置上換行到下一行。但是，需要注意的是，此 hack 可能不如第一個解決方案可靠，第一個解決方案依賴標準 Bootstrap 實用程式。

以上是如何在行動裝置響應式Bootstrap中實作自訂列排序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！