Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div
above another div
I was looking for a way to change the orders of the divs only for mobile version so then I can style it nicely. Thanks to nickf reply I got to make this piece of code which worked well for what I wanted, so i though of sharing it with you guys:
// changing the order of the sidebar so it goes after the content for mobile versions
jQuery(window).resize(function(){
if ( jQuery(window).width() < 480 )
{
jQuery('#main-content').insertBefore('#sidebar');
}
if ( jQuery(window).width() > 480 )
{
jQuery('#sidebar').insertBefore('#main-content');
}
jQuery(window).height(); // New height
jQuery(window).width(); // New width
});