CSS Div Block re-arranging for multiple screens - html

Question

So what I'm trying to do is design a page that has two sidebars and a main article area. As it shrinks down for tablet or phone use though, I want the two sidebars to move so they are stacked vertically beside the main area at first, and then eventually both move below it. The Problem I am having is I can't get them to re-order correctly upon doing so.
The three sections on the left (desktop/tablet/phone) is how I want it. The pages on the right are how it's appearing now. Basically I need 5 to move up under 4, and 3 to move beside 4/5 for tablet view, and then 4 to move down under 3 for phone view.
I hope that makes sense? I'm using Dreamweaver if it helps/matters. Thanks!
Clicky to see what I mean!

Answer 1

It can be done if certain heights are known.
Fiddle: http://jsfiddle.net/BramVanroy/Pt7sS/
The height of #contentWrap and #sideRight need to be known to make this work. If these are not known, you can fetch the heights through jQuery.
html, body, #header1, #header2, #contentWrap {
width: 100%
}
#header1 {
background: red;
height: 50px
}
#header2 {
background: green;
height: 40px
}
#sideLeft, #main, #sideRight {
box-sizing: border-box;
float: left;
height: 200px
}
#sideLeft, #sideRight {
width: 20%;
background: #333
}
#main {
background: grey;
width: 60%
}
#media screen and (max-width: 768px) {
#main {
float: right;
width: 65%
}
#sideRight {
clear: left
}
#sideRight, #sideLeft {
width: 35%;
height: 100px
}
}
#media screen and (max-width: 480px) {
#sideLeft, #main, #sideRight {
float: none;
width: 100%;
position: absolute
}
#contentWrap {
position: relative;
height: 400px
}
#main {
top: 0
}
#sideLeft {
bottom: 100px
}
#sideRight {
bottom: 0
}
}
​