Show image first when using two colums

[stevanvermeulen12]

I have structured my site in such way that it shows an image and a text on the same level, using one of the templates when creating a new page. Template 4.

Whenever I view it on mobile it shows the text first, and the image second.

Is there any way to turn this around?

Micro Blog - Dating After The Red Pill

Thank you,
Stevan

[nabeel]

Hi Stevan,

Thank you for reaching out to us. There are couple of ways of doing this. You can create two sets of each section (one for desktop and one for mobile - you can simply duplicate your sections and show/hide them based on the screen size). In the section for mobile devices, swap the images so they will be displayed first.

The other way is using custom CSS, it’s not recommended though because sooner or later custom CSS always creates issue, however if you want to achieve this using CSS then you can assign a class column-reverse to either Section or Row and then add the following code in the Theme Options > CSS:

@media screen and (max-width: 979px) {
    .column-reverse .x-row-inner {
        flex-direction: column-reverse;
    }
    .column-reverse .x-row-inner .x-col {
        flex-basis: auto;
    }
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!