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>  

这是我的代码,并在中间窗口中查看:

当我将窗口更改为xs时​​,我想实现:

请帮助我,tks

Answer 1

您需要将该 div 放在最后，然后在同一行上使用推拉来重新排列列。

演示

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

PS 这也可以通过flexbox和order来完成