Changing The Order Layers With Responsive Layouts

I am currently using CS-Cart CS-Cart 4.3.4.

My cart uses a responsive layout so when the screen gets smaller, it collapses the divs. The problem is right now, the order of divs is:

  1. Header
  2. Sidebar
  3. Body
  4. Footer

I want to move the body above the sidebar so people using mobile phones don't have to scroll down so far to read the main content of the site.

Can this be done? It is a fairly simple settings issue or is it much more complex? I am looking for some sort of insight.

My cart uses one of the basic "responsive theme" layouts that came with the cart. It is not using a 3rd party theme.

I know I can't be the first person to ask about this? I have tried to search the forums though but found nothing. Please feel free to share previous threads on the subject if they exist. This problem has been bugging me for awhile and I want to improve my user's experience.

Thank you!

You can write small jquery script which will move sidebar after main content on small screen resolutions