How do I get 3 horizontal divs to stack in different vertical order or flow when browser width decreases?

Question

I have 3 divs in a horizontal row in my footer. I'm using the bootstrap grid.

<div class="col-xs-6 col-sm-4 div1">
<div class="col-xs-6 col-sm-4 div2">
<div class="col-xs-6 col-sm-4 div3">

So that they appear in this sequence

+------+------+------+
| div1 | div2 | div3 |
+------+------+------+

When the browser width decreases to a certain width suppose 600px, I want the 3 divs to stack vertically in a single column in the following sequence.

+------+
| div1 |
+------+
| div3 |
+------+
| div2 |
+------+

How can I achieve that using CSS?

Answer 1

You can use push and pull method. Also remove the col-xs-6 class to achieve the single column layout on mobile views.

<div class="container">
   <div class="col-sm-4">div1</div>
   <div class="col-sm-4 col-sm-push-4">div3</div>
   <div class="col-sm-4 col-sm-pull-4">div2</div>
</div>

Answer 2

The class col-xs- applies to screen widths <768px. If the divs need to stack vertically for mobile views, change this class to 'col-xs-12' This will make them take 100% width and align vertically one below the other.