CSS Responsive Design Order of Columns - html

Question

Ok, I have 3 columns floating left. Now when the viewport is less than 600px I want column 2 to appear before column 1 without using position:absolute. Is there a way to do this just by using CSS and HTML?
If not you can also post other variants.
Here's my fiddle

Answer 1

Is this what you are after? http://jsfiddle.net/panchroma/dWJ9g/
You will see I've reordered the col1 and col2 in the HTML and applied margin to the #col1 and #col2
HTML
<div id="wrapper">
<div id="header">HEADER</div>
<div id="main">
<div id="col2" class="cols">COL 2</div>
<div id="col1" class="cols">COL 1</div>
<div id="col3" class="cols">COL 3</div>
<div class="clear"></div>
</div>
<div id="footer" class="clear">FOOTER</div>
</div>
CSS changes
#col1 {float:left; height:100px; width:200px; background:#cc4444;margin-left:-400px;}
#col2 {float:left; height:200px; width:200px; background:#44cc44;margin-left:200px;}
#media only screen and (max-width:600px) {
#wrapper, #header, #main, #footer {width:100%;}
#col1, #col2, #col3 {float:none; width:100%;margin-left:0;}
}
Hope this helps!

Answer 2

If you don't want to change the markup I'd suggest using javascript, to change the html and id.
http://jsfiddle.net/FBAtT/
var col1 = document.getElementById('col1'),
col2 = document.getElementById('col2'),
swapped = false;
window.onresize = function () {
var width = window.innerWidth;
if (width < 600 && swapped === false) {
swapCols();
swapped = true;
} else if (width > 600 && swapped === true) {
swapCols();
swapped = false;
}
};
function swapCols() {
var _col1 = col1.innerHTML,
_col1id = col1.id,
_col2 = col2.innerHTML,
_col2id = col2.id;
col1.innerHTML = _col2;
col1.id = _col2id;
col2.innerHTML = _col1;
col2.id = _col1id;
}

Answer 3

try this
http://jsfiddle.net/mKbnH/2/
CSS
html * {margin:0; padding:0;}
body {background:#000; font-family:helvetica, verdana;}
#wrapper {margin:50px auto;}
#wrapper, #header, #main, #footer {width:600px;}
#header {height:100px; background:#cccc44;}
#main {}
#col1 {float:left; height:100px; width:200px; background:#cc4444;}
#col2 {float:left; height:200px; width:200px; background:#44cc44;}
#col3 {float:left; height:150px; width:200px; background:#4444cc;}
#footer {height:50px; background:#cc44cc;}
.cols {}
.clear {clear:both;}
#media only screen and (max-width:600px) {
#wrapper, #header, #main, #footer {width:100%;}
#col3 {width:100%;}
#col1, #col2 {width:50%}
}