Move left-most column in a responsive design

Question

I'm working on making a redesign of my college newspaper's website and got the design to fit nicely on an iPad. I'm now trying to switch it to a one column layout (for smart-phones).

The problem is that, in a single-column layout, the the right column must go above the left column. I would know how to do this if the code for the right column was written before the left column, but unfortunately it isn't.

How can I move the left column under the right column? Do I need to use Javascript to switch the column orders in the HTML code? Thanks!

EDIT: I realize that I can have a DIV that is invisible when the width > someNumber. I'd prefer not to have to be redundant though...

Answer 1

The CSS only solution is to start with the smallest screen as your default design then enhance as the screen size increases using media queries. Starting with the smallest screen first puts your markup in the correct order - for the image above Banner, Primary Navigation, Main Content (right-hand column), Aside (left-hand column) and (presumably), Footer. As the media queries apply additional CSS you can then float Main Content right and Aside left - the elements are positioned correctly for smaller or larger screens.

Answer 2

The easiest way I can think to do this is with jQuery (a javascript library) to remove the right column content from one div to another in the DOM. This allows you to create and remove the div's on the fly so there is not redundancy in the end.

If this is too vague, comment and I'll add an example.

Answer 3

CSS can take elements out of the document flow and put them anywhere, in any manner you want. But it cannot create a new document flow (ie it can't reorder elements). You need to position one element relative to the other or position them both absolutely.

If you have access to Javascript and are not concerned about graceful degredation you could also swap the .innerHTML of the two divs.