如何为移动优先布局重新排序 Bootstrap 3 列？

在移动布局中重新排序 Bootstrap 3 列

问题：

响应式布局具有固定的顶部导航栏和两列其下方：侧边栏和主要内容。虽然布局在桌面上按预期运行，但在移动设备上，侧边栏堆叠在主要内容的顶部，将其置于不需要的位置。在移动设备上所需的顺序是先显示主要内容，然后是侧边栏。

答案：

在 Bootstrap 中直接更改移动设备上的列顺序是不可行的3. 但是，解决方法是利用 Bootstrap 的响应式列重新排序功能来处理大型数据

步骤：

1. 重新排列 HTML 中的列顺序，将主要内容放在前面：

<div class="col-lg-9 col-lg-push-3">...</div>
<div class="col-lg-3 col-lg-pull-9">...</div>

2. 默认情况下，即使在移动设备上，这些类也会首先显示主要内容
3. 类 col-lg-push-3 将主要内容向右推三列，而 col-lg-pull-9 将侧边栏向左拉九列，从而获得所需的顺序大屏幕。

说明：

在 Bootstrap 中，列可以是使用 col-push 和 col-pull 重新定位特定的屏幕尺寸。通过对大屏幕使用 col-lg-push 和 col-lg-pull，列将在这些屏幕上采用指定的顺序，同时在较小的设备上保持原始顺序。

以上是如何为移动优先布局重新排序 Bootstrap 3 列？的详细内容。更多信息请关注PHP中文网其他相关文章！