Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Stacking divs responsively

Stacking divs responsively


I am working on a responsive site that when on desktop / large Screen it will be in the following layout.

  1. Header
  2. Menu
  3. Content

Then when it's in phone / small screen it will be

  1. Header
  2. Content
  3. Menu

How can do this? The examples I've seen all seem to use absolute positioning, but I want it to be dynamic to the size of the screen and size / move dynamically.


Problem courtesy of: alinitro


You can use CSS3 flexbox box-direction: reverse; property. Write like this:

    display: -moz-box;
    display: -webkit-box;
.flex div, .header{
    border:1px solid red;

@media screen and (max-width : 400px){
    -moz-box-direction: reverse;
    -webkit-box-direction: reverse;
    box-direction: reverse;

Check this

Solution courtesy of: sandeep


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Stacking divs responsively


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription