Html Bootstrap 3：仅在较小的屏幕尺寸上推/拉列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21933664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: Push/pull columns only on smaller screen sizes
提问by mpdc
I have the following layout on a page:
我在页面上有以下布局：
<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 |
--------- ----- ----- ----- ---------
But on smaller screen sizes I would like the following layout:
但在较小的屏幕尺寸上，我想要以下布局：
<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 |
----------- ----------- -----------
(Note the re-arranging of the column order.) Is it possible to push/pull columns only on smaller screen sizes? I've tried the following, but I get the oddest layout, and seem to lose <div>5</div>completely...:
（请注意列顺序的重新排列。）是否可以仅在较小的屏幕尺寸上推/拉列？我尝试了以下方法，但我得到了最奇怪的布局，并且似乎<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>
回答by mpdc
Answered it myself, simply by thinking: mobile first!
我自己回答，只是想：移动优先！
<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>
Get them in the order I want on the tablet first, then push/pull them in to position on the desktop.
首先在平板电脑上按照我想要的顺序获取它们，然后将它们推/拉到桌面上的位置。
回答by Kcats Wolfrevo
I had a slightly different requirement (still in the similar lines)
我的要求略有不同（仍然在类似的行中）
the below gets me there:
下面让我到那里：
<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>
