Changing two column load-out for mobile

[Eudelo]

Good morning,
I am using a layout on my pages where I have a left column sidebar and a right column reading page. This works fine for Desktop but on mobile the page loads and the layout does not work because the sidebar comes before the content.

Thank you for your support.

I have added example URL and access details to the secure note.

[tristup]

Hi Jason,

Thanks for reaching out.
You can achieve that by adding the following code into the Theme Options > CSS, I would suggest you add the hierarchy class to avoid any conflict in other pages. Here is the sample code I have added body.page-id-869 to specify the page you mentioned.
To apply the same code, just add the body.page-id- with it.

@media (max-width: 767px)
{
    body.page-id-869 #x-section-4 .container
    {
        display: flex;
        flex-direction: column-reverse;
    }
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[Eudelo]

Thanks, unfortunately that did not work, but it could be because of additional coding. I will have my designer look at this as he is more aware of the impact of other CSS that might have on this code, thank you.

[tristup]

Hi Jason,

I have tested the code using the browser debugger into your given page URL and it works as expected. Still, I would recommend you check with your designer as he is aware of the other custom CSS and the impact.

Thanks