Not sure if this is possible using just css, or whether I have to use javascript as well.

I have a website, that I want to add a css file for viewing in mobile devices. The structure is as follows: Header, content, footer. The content section has three divs: as follows: floated left, floated right, and the other div stays in the center. For mobile viewing, I want all divs to flow below each other, floated left stays at the top, the center div comes next, then the div floated right comes at the bottom. However, it doesn't work out right, as it flows as left, right and then center. Absolute positioning does not work as the right div comes on top the center div. I cannot use specific margin attributes as both width and height of divs are variable.

Any ideas, for css only, to get it to flow as left, center and then right?