Move Sidebar from Above Content To Below When Responsive [closed]

Question

My theme automatically puts the sidebar above the content rather than below it when going responsive/mobile.

I am trying to figure out how I can get it to go below the content instead, as having it above is really hurting customer experience because they have to scroll so much to see the product.

This is the demo of the theme I am using which shows the issue: http://sooperstore.themesforge.com/shop/twist-bandeau-bikini-top/

Is there a bit of CSS code I can add which will force a rearrange so the content is shown above the sidebar when it goes responsive?

Answer 1

Depending on which device you want to target, you'll need to use a media query, you can read more about those here: CssTrick:

@media only screen and (max-width : 320px) {
    #content { 
      display: flex; 
      /* Optional, if you want the DIVs 100% width: */ 
      flex-direction: column;
    }
    #content > .wooside { order: 1; }
    #content > .nine { order: 2; }
}   

Hope you understand!!

Answer 2

To achieve this you can use below custom CSS code on your site using this free WordPress plugin https://wordpress.org/plugins/simple-custom-css/

@media only screen and (max-width : 767px) { 

    #content { 
        display: flex; 
        flex-direction: column;
    } 

    #content > .three.first { 
        order: 2; 
    } 

    #content > .nine { 
        order: 1; 
    } 
}