Swapping columns on mobile

[lowlandet]

Hi there,

I am finishing up this site: http://www.hardi-aeon.com/

And I would like to swap every other column when accessing the site on mobile.

I have tried multiple solutions found on the forum, but none of them worked out.

Can you help me out here?

[nabeel]

Hi @lowlandet,

Thank you for reaching out to us. To swap columns on mobile screens, simply assign a class swapcolumns to the sections where you need to swap it’s columns and then add the following code in the Theme Options > CSS:

@media screen and (max-width: 979px) {
    .x-section.swapcolumns .x-row .x-row-inner{
        flex-flow: wrap-reverse
    }
}

To learn more about Flexbox please see https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[lowlandet]

Worked perfectly! Thanks!

[lely]

You’re always welcome!

Glad @Nabeel was able to help you. Cheers.