Bootstrap 3：如何仅在较小的屏幕尺寸上推/拉列
Bootstrap 提供了推拉列以调整其列的功能基于屏幕尺寸的布局。但是，有时您可能会遇到这样的情况：您只想在较小的屏幕尺寸上推/拉列，同时保持其在较大屏幕上的位置。
考虑以下 HTML 结构：
<code class="html"><div class="col-lg-3">1</div> <div class="col-lg-2">2</div> <div class="col-lg-2">3</div> <div class="col-lg-2">4</div> <div class="col-lg-3">5</div></code>
此布局在大屏幕上显示如下：
| 1 | 2 | 3 | 4 | 5 |
但是您想要在较小的屏幕上使用不同的布局：
| 1 | 5 | | 2 | 3 | 4 |
解决方案：
为了实现这一目标，我们需要以“移动优先”的思维来解决问题。首先配置最小屏幕尺寸的布局，然后使用推/拉类将列移动到较大屏幕上的所需位置。
更新的 HTML：
<code class="html"><div class="col-lg-3 col-xs-6">1</div> <div class="col-lg-3 col-xs-6 col-lg-push-6">5</div> <div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div> <div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div> <div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div></code>
通过将大屏幕和小屏幕的列类放置在同一个标签中，我们可以确保列首先在平板电脑上按所需的顺序放置。然后，推/拉类用于调整它们在桌面上的位置。
此更新的代码将在所有屏幕尺寸上产生所需的布局：
大屏幕：
| 1 | 5 | 2 | 3 | 4 |
小屏幕：
| 1 | 5 | | 2 | 3 | 4 |
以上是如何仅在较小的屏幕尺寸上推/拉 Bootstrap 3 中的列？的详细内容。更多信息请关注PHP中文网其他相关文章！
