如何在移动布局上反转 Bootstrap 3 列顺序？

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

设计响应式布局时，通常需要调整较小屏幕上的列顺序。本文解决了在 Bootstrap 3 移动布局中更改列顺序的具体问题，其中侧边栏列目前堆叠在主要内容列的顶部。

问题：

我有一个带有导航栏、侧边栏和主要内容的响应式布局。在桌面上，布局显示为：

navbar
[3][9]

但是，在移动设备上，布局更改为：

navbar
[3]
[9]

我想将移动设备上的顺序反转为：

navbar
[9]
[3]

解决方案：

虽然不是可以使用 Bootstrap 的内置网格系统直接更改移动设备上的列顺序，有一个解决方法。通过反转 HTML 代码中列的顺序，您可以操纵它们在不同屏幕尺寸上的显示方式。

在这种情况下，我们有：

<div>

要反转顺序移动设备，将其更改为：

<div>

默认情况下，即使在移动设备上，也会首先显示主要内容。 col-lg-push 和 col-lg-pull 类用于在较大屏幕尺寸上对列重新排序，确保侧边栏保留在左侧，主要内容保留在右侧。

注意： 此解决方案仅适用于大屏幕尺寸（例如笔记本电脑）。在较小的屏幕上，列仍将按照 Bootstrap 的预期堆叠。

以上是如何在移动布局上反转 Bootstrap 3 列顺序？的详细内容。更多信息请关注PHP中文网其他相关文章！