如何更改行動裝置上的 Bootstrap 3 列順序？

如何在行動版面配置上重新排序Bootstrap 3 列順序

使用Bootstrap 3 建立響應式佈局時，您可能會遇到以下情況：從桌面視圖轉換到行動視圖時，列數會改變。要解決此問題並確保主要內容保留在行動裝置的頂部，請按照以下步驟操作：

1.反轉列順序：

不使用桌面視圖的標準列順序（左側邊欄，右側內容），而是切換移動視圖的順序。例如：

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

2。使用push和pull類：

在桌面視圖中，使用col-lg-push和col-lg-pull可以有效地將主要內容推到右側並將側邊欄拉到左側交換順序。

<div class="row">
  <div class="col-lg-9 col-lg-push-3">
    <!-- Main content -->
  </div>
  <div class="col-lg-3 col-lg-pull-9">
    <!-- Sidebar -->
  </div>
</div>

3.反轉列的順序：

或者，您可以反轉HTML 中的列的順序，以便主要內容排在前面：

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

按照以下步驟操作，您可以在Bootstrap 3中有效地將移動視圖上的列重新排序，確保所需的內容層次結構。

以上是如何更改行動裝置上的 Bootstrap 3 列順序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！