Bootstrap: I want to click div when I change 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 the middle window:

when I change the window to xs, And I want to achieve this:

Please help me, tks

Answer 1

You need to put this div last, and then use push and pulls to re-arrange the columns when they are on the same row.

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> 

PS This can also be done using flexbox and order.