bootstrap:I want to push the div down when I change the window to xs

Question

[code:]

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

Please help me,tks

Answer 1

You need to put that div last and then use push and pulls to re-arrange the columns when on the same line.

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. This could also be done with flexbox and order