我在页面上有以下布局:
<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>
答案 0 :(得分:144)
自己回答,只是想一想:先移动!
<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>
首先在平板电脑上按照我想要的顺序获取它们,然后将它们推入/拉入桌面上的位置。
答案 1 :(得分:4)
我的要求略有不同(仍然在类似的行中)
以下让我到那里:
<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>