我在页面上有以下布局:
<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>
最佳答案
我自己回答，只需思考:移动优先!
<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>
按照我想要在平板电脑上的顺序获取它们，然后将它们推入/拉入到桌面上。
关于html - bootstrap 3:仅在较小的屏幕尺寸上推/拉列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21933664/