相关疑难解决方法(0)

我在页面上有以下布局:

<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-12),当屏幕大小与移动设备的大小相对应时,我会更改它们的位置.我会按相反的顺序放置它们.

我已经读过push和pull bootstrap指令有助于实现这一点,但是是否可以使用以下类更改两个相同大小的列的位置？

div.col-xs-12.col-xs-push-12
  p test1
div.col-xs-12.col-xs-pull-12
  p test2