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 to set expanded menu to be shut on page load

    How to select element by order ? - Css

    How to obtain non-uniformly scrolling elements and layered “curtain-like” backgrounds on a webpage?

    How to style parent li elements of headers using CSS?

    Show unordered list's bullet points when display:table

    Internet Explorer 10 menu item shows focus outline unexpectedly

    How to avoid CSS selector applying to more than one level of descendants

    How to fix content leaks out of an element despite use of “overflow:hidden”?

    How to align text vertical CSS

    CSS - HTML how to make the anchor image go to a specific spot

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    How to prevent specific css style sheet from styling a specific html tag

    How to design a CSS for floating confirm dialog centered on the visible portion of a page?

    How to use CSS in Bootstrap to load a logo in the nav-brand class and have it centred?

    Hovering over item in WordPress list of pages shows Featured Image

    How to animate 2 css layouts from left to right or from right to left with jquery?

    How to add a Google icon font to pseudo :before

    Odd visual effect (little line shows) when hovering over button in browser

    How to reflect updates to CSS at runtime in Visual Studio 2012?

    How to combine grouped inputs with aligned forms?

    How to make a CSS rule act differently inside another div tag?

    How to pass a local file name to css-validator.jar?

    How to change tinymce scrollbar color?

    How to make an element with background image appear using css animation/javascript

    How to spin an image horizontally with CSS

    css floating problem: how to get a left float to wrap around a right float

    How to break text in a line in a div by css?

    How do I center a container in my HTML/CSS?

    css hover element to show child, how can I keep the hover css on the parent when I mouseover the child?

    How to make 1 image tile in css?