Content First Responsive Layout

To make the first sidebar content appear after the main content in mobile (width of 767px and below), we can apply the following styles on the appropriate pages using CSS injector.

@media (max-width: 767px) {
    .main-content {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .mc-content {
        -webkit-box-ordinal-group: 1;  
        -moz-box-ordinal-group: 1;     
        -ms-flex-order: 1;
        -webkit-order: 1; 
        order: 1;
    }
    .site-sidebar-first {
        -webkit-box-ordinal-group: 2;  
        -moz-box-ordinal-group: 2;     
        -ms-flex-order: 2;
        -webkit-order: 2; 
        order: 2;
    }
    .site-sidebar-second {
        -webkit-box-ordinal-group: 3;  
        -moz-box-ordinal-group: 3;     
        -ms-flex-order: 3;
        -webkit-order: 3; 
        order: 3;
    }
}

Supported Browsers

• Firefox (Latest)
• Chrome (Latest)
• Internet Explorer 10 only
• Safari (Latest)
• Opera (Latest)
• iOS Webkit
• Android Webkit