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

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

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

问题：

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

navbar
[3][9]

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

navbar
[3]
[9]

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

navbar
[9]
[3]

解决方案：

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

在这种情况下，我们有：

<div>
<p>要反转顺序移动设备，将其更改为：</p>
<pre class="brush:php;toolbar:false"><div>
<p>默认情况下，即使在移动设备上，也会首先显示主要内容。 col-lg-push 和 col-lg-pull 类用于在较大屏幕尺寸上对列重新排序，确保侧边栏保留在左侧，主要内容保留在右侧。</p>
<p><strong>注意：</strong> 此解决方案仅适用于大屏幕尺寸（例如笔记本电脑）。在较小的屏幕上，列仍将按照 Bootstrap 的预期堆叠。</p>
</div>