设计响应式布局时，通常需要调整较小屏幕上的列顺序。本文解决了在 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中文网其他相关文章！
