change order of content responsive bootstrap theme drupal

Question

I’m using D7 with Bootstrap 3 (sub)theme. Currently, if the site is viewed on a small screen, content from “Primary” is displayed above content from the main content area. I’d like for the main content area to be above the stuff from “Primary”. Is there a way to do this?

Answer 1

This is happening because the aside element (your "Primary" region) is before the main element in the DOM. You can fix this using jQuery detach() and append() methods. Basically, at the small screen breakpoint, detach the <aside> and append it after <main>.