bootstrap：当我将窗口更改为xs时​​，我想将div推下来

Question

[代码：]

<div class="col-sm-12 col-xs-12 text-left">
   <div class="col-sm-3 col-xs-12"></div>
   <div class="col-sm-3 col-xs-4"></div>
   <div class="col-sm-3 col-xs-4"></div>
   <div class="col-sm-3 col-xs-4"></div>
</div>  

here is my code,and review in a middle window:

when I change the window to xs,And I want to achieve that：

请帮帮我，tks

Answer 1

你需要将该div放在最后，然后在同一行上使用push和pull来重新排列列。

Demo

<div class="col-sm-12 col-xs-12 text-left">
   <div class="col-sm-3 col-sm-push-3 col-xs-4">4</div>
   <div class="col-sm-3 col-sm-push-3 col-xs-4">4</div>
   <div class="col-sm-3 col-sm-push-3 col-xs-4">4</div>
   <div class="col-sm-3 col-sm-pull-9 col-xs-12">12</div>
</div>  

P.S。这也可以通过flexbox和order

完成