Change div order in CSS or javascript

Question

say I have layout like so:

<div id="main">            
    <div id="NormalContent">
        {some content which is a fixed length list}
    </div>
    <div id="FeaturedContent">
        {some content which may contain a long list}
    </div>
</div>

and I want to place FeaturedContent above NormalContent.

Can I do this with CSS? I assume I can with Javascript?

Answer 1

For a non-jquery answer

var content = document.getElementById('FeaturedContent');
var parent = content.parentNode;
parent.insertBefore(content, parent.firstChild);

Note that there is no need to remove it from the DOM, adding it a second time will move it.

Answer 2

this is a clearer way to move them with 1 line of jQuery:

$('#FeaturedContent').prependTo('#main');