如何更改移动设备上的 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中文网其他相关文章！