如何在保持移动布局的同时在较大屏幕上重新排序 Bootstrap 3 列？

更改 Bootstrap 3 移动布局中的列顺序

您正在使用 Bootstrap 3.x 使用响应式布局，该布局由两列组成：侧边栏 (3) 和内容（9）。虽然布局在桌面上呈现良好：

navbar
[3][9]

在移动设备上，顺序发生了变化：

navbar
[3]
[9]

您希望在移动设备上保持顺序，内容位于顶部。

解决方案：重新排序列

重新排序列的方法根据屏幕尺寸而有所不同。在这种情况下，您无法更改较小屏幕上的顺序。但是，您可以在更大的屏幕中更改它。

第 1 步：更改列的顺序

更改代码中列的顺序：

<!-- Main Content -->
<div>

默认情况下，这将首先显示主要内容，即使在

第 2 步：使用 col-lg-push 和 col-lg-pull

col-lg-push 和 col-lg-pull 允许您重新排序大屏幕上的栏目。这是在大屏幕中将侧边栏显示在左侧、将主要内容显示在右侧的方法：

<!-- Main Content -->
<div>

通过使用此方法，您可以在大屏幕中重新排序列，而不影响移动设备上的布局.

以上是如何在保持移动布局的同时在较大屏幕上重新排序 Bootstrap 3 列？的详细内容。更多信息请关注PHP中文网其他相关文章！