引导程序3：仅在较小的屏幕尺寸上推/拉列

Question

我在页面上有以下布局：

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

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

按照我想要在平板电脑上的顺序获取它们，然后将它们推入/拉入到桌面上。