Swap columns on mobile #2

[hypnorich]

I have had a look at the other thread that has the same title as this one and I have looked at this article https://xthemetips.com/swap-columns-mobile/416/ and tried to put into place the advice on using flexbox to swap around the column order on mobile but it hasn’t worked for me.
I would appreciate a little help

[christopher]

Hi there,

Would you please kindly go to the Layout tab of the Cornerstone and click on the magnifying glass icon of the section which you have 2 columns in, and then click on the Customize tab at the top of the section options to see the Class option. Add mobileswap to that option and save the settings.

Then kindly add the CSS code below to X > Launch > Options > CSS:

@media (max-width: 768px) {
    .mobileswap .x-container {
        display:flex;
        flex-flow: column wrap;
    }

    .mobileswap .x-column:first-child {
        order: 2
    }

    .mobileswap .x-column:last-child {
        order: 1
    }
}

If you still have problems kindly get back to us with the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Also, give us the Page Name to check and a screenshot of the columns you want to swap.

Thank you.

[hypnorich]

Thanks for the speedy reply. I have changed the code from the code that has been recommended in the previous post on this same subject but it has had no effect either. The part that needs swapping is still the same section I mentioned in my OP on the same page I mentioned.
As you need a picture as well I have attached that. I added a red ring around the area as well, just in case.
My login details are added to the OP as well. These are still the same and are still valid

[Joao]

Hi There,

I have changed the class as Christopher reccommended and added the CSS to Cornerstone CSS and it does work.

If you want to achieve the same effect without the need of adding code, remember that cornerstone offers the possibility to hide rows based on screen width on The Customize Tab.

That way instead of coding you can create two different rows, and choose each row to be hidden in different devices.

Hope it helps

[hypnorich]

Hi Joao, I appreciate you getting in on the problem as well but I am still struggling. The code and class you added had already been added by me. Are you saying that both were completely missing from my site? If so I have bigger problems than the order of row elements!
I reloaded my site and it stayed the same. I cleared the cache and it stayed the same. I opened an incognito window and had the same result.
Rather than sticking with the problem I will go for the quicker method of duplicating the row and hiding on different screens. It isn’t my preferred way of doing it but it means I can move on to the next job with the site

[Joao]

Hi There,

When I checked your website, I could not find the CSS on Cornerstone | CSS

Also you had a different class from the one suggested by Christopher, of course if you have adjusted the code for the class you used it should work also, but I did not find the code on Cornerstone CSS.

I personally prefer hiding the rows, I think it is a more straightforward solution.

Let us know if you need further help.

Thanks