Swapping columns order in mobile version

[MrK]

Hi guys,
I’m testing the X Pro trial.

I’m working now on the mobile version of a homepage.
The homepage is setup this way:

ROW1: img / text
ROW2: text / img
ROW 3: img / text

Obviously as a normal behaviour when I resize the screen to mobile the order stay the same.
There’s a way instead to have just for mobile version every row in this order?

ROW1: img / text
ROW2: img / text
ROW 3: img / text

I’m reading this interesting post about it:

Swap Columns on Mobile - X Theme & Pro Theme - Michael Bourne

Do you think there’s a better way to do it or I can try the solution provided by this post?

thanks
K

[basanta]

Hi There,

This is the best way to swap the column order. You can try this tip!

All the best!

Thanks

[MrK]

Hi thanks for the help.

I tried this tip but it doesn’t work exactly as I want.

I would like this swap column to be active just for this 2 devices:

Code I’m using is this:

@media (min-width: 768px) {
  .x-section .x-container.swapcolumns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
}

I have 4 rows:
A --> IMG - TEXT
B --> TEXT - IMG (I added class id swapcolumns)
C --> IMG - TEXT
D --> TEXT - IMG (I added class id swapcolumns)

regards
K

[christopher]

Hi there,

Would you please give us the URL of the page in question, so we can check the case and give you proper CSS code depending on your case?

As we do not have anything at hand right now I am not sure how I can be of a help.

If I want to give the code I will use the Flex Display Ordering system:

A Complete Guide to Flexbox | CSS-Tricks

Thank you.

[MrK]

Thanks for your help chris sure the website is the same of the other topic you’re helping me with.
This is the admin login:

[christopher]

Hi there,

Please add the CSS code below to Pro > Launch > Theme Options > CSS:

@media (max-width: 767px) {
    .x-section.swapcolumns .x-container {
        display: flex;
        flex-flow: column-reverse wrap;
    }
}

Thank you.

[MrK]

Thanks Chris it worked

[Joao]

glad to hear it!