Bootstrap 3：仅在较小的屏幕尺寸上推/拉列答案

【问题标题】：Bootstrap 3: Push/pull columns only on smaller screen sizesBootstrap 3：仅在较小的屏幕尺寸上推/拉列
【发布时间】：2014-03-22 22:08:14
【问题描述】：

我在页面上有以下布局：

<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>

 --------- ----- ----- ----- ---------
|    1    |  2  |  3  |  4  |    5    |
 --------- ----- ----- ----- ---------

但在较小的屏幕尺寸上，我想要以下布局：

<div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div>

 ----------------- -----------------
|        1        |        5        |
 ----------------- -----------------
|     2     |     3     |     4     |
 ----------- ----------- -----------

（注意列顺序的重新排列。）是否可以仅在较小的屏幕尺寸上推/拉列？我尝试了以下方法，但我得到了最奇怪的布局，并且似乎完全失去了<div>5</div>...：

<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-2 col-xs-4 col-xs-push-4">2</div>
<div class="col-lg-2 col-xs-4>3</div>
<div class="col-lg-2 col-xs-4>4</div>
<div class="col-lg-3 col-xs-6 col-xs-pull-12">5</div>

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

自己回答，只是想：移动优先！

<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>

首先在平板电脑上按我想要的顺序将它们推入/拉入到桌面上的位置。

【讨论】：

是的，这是正确的做法，因为 Bootstrap (3) is itself mobile-first。
今天我学习了 boostrap... 首先考虑移动设备。谢谢！

【解决方案2】：

我有一个稍微不同的要求（仍然是类似的行）

下面让我到达那里：

<div class="row">
    <div class="col-lg-1 col-xs-2">TIME</div>
    <div class="col-lg-5 col-xs-6">EVENT</div>
    <div class="col-lg-2 col-xs-4">STATUS</div>

    <div class="col-xs-2 visible-xs"></div> @*offset for xs*@

    <div class="col-lg-2 col-xs-6">START LIST</div>
    <div class="col-lg-2 col-xs-4">RESULTS</div>
</div>

【讨论】：