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


Tags: html,css,twitter-bootstrap-3

Problem :

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?



Solution :

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>

    CSS Howto..

    How can I convert an absolute file path to one CSS can use?

    How to implement geometric div backgroud shapes in css

    Hide one div when showing another with JavaScript

    How do I get this ul li dropdown menu to show on hover with jquery or javascript?

    Ruby on rails dropdown