jQuery and CSS: column order

Column order with CSS has been an hot topic for quite a while. Basically, with CSS we can modify the source code order either with relative positioning or with negative margins. Anyway, this involves some tedious calculations in order to get the desired result. So why should we not make life easier by using just some lines of jQuery code?

Let's start with a simple three-columns layout with header and footer:

body, h1, h2, p {
 margin: 0;
 padding: 0;
}

body {
 background: #fff;
 color: #333;
 font: 76% Arial, Helvetica, sans-serif;
}

h1 {
 font-size: 2em;
}

h2 {
 font-size: 1.6em;
}

p {
 padding: 0.4em 0;
 line-height: 1.5;
}

#site {
 margin: 0 auto;
 width: 76%;
 padding: 2em 0;
 overflow: auto;
 height: 100%;
}

#header {
 border-bottom: 2px solid #ccc;
 padding-bottom: 0.2em;
 width: 100%;
}

#content, #sidebar, #extra {
 float: left;
 margin: 0;
 padding-top: 0.3em;
}

#content {
 width: 49%;
 background: #ffc;
}

#sidebar, #extra {
 width: 25%;
}

#sidebar {
 background: #cff;
}

#extra {
 background: #def;
}

#footer {
 clear: both;
 padding: 0.2em 0;
 border-top: 2px solid #ccc;
 width: 100%;
}

View the live demo

So far so good. Now we want to modify the column order with jQuery. Here's how this could be done:

$(document).ready(function() {

    var $content = $('#content').clone();
    $('#content').remove();
    $content.insertAfter('#sidebar');


});

View the live demo

First, we've cloned the first column in source, then we've removed it and finally we've inserted it just after the second column in source, so that now the first column is placed just in the middle of our layout as the central column. Do more with less!