Question

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.

Thanks!

Answer 1

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

.flex{
    display: -moz-box;
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    display: -webkit-box;
    box-orient:vertical;
    display:box;
    width:100%;
}
.flex div, .header{
    border:1px solid red;
    height:100px;    
}


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

Check this http://jsfiddle.net/Hj5pz/