Swap Columns Not Working

[VitalityCBD]

Hello,

I built a global block to customize a product page.
And i put swapcolumns on every alternating row for mobile views, but it’s not working.

Any idea why?

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

This code has worked on every other website and page i’ve used it on, including prior global blocks.

Natural CBD Oil | Naturally Flavored CBD by Lumina CBD

Please advise.

Jesse

[ruenel]

Hello Jesse,

Thanks for posting in!

The code will only work if you are using the v1 row element. Since you are using the new row element, the custom css should be this instead:

@media screen and (max-width: 767px) {
    .x-section .x-row.swapcolumns .x-row-inner{
        display: flex;
        flex-direction: column-reverse;
    }
}

Hope this helps. Kindly let us know.

[VitalityCBD]

That didn’t work either.
But instead of not working at all, it made each row with a swapcolumns tag no-mobile responsive.
It didn’t swap the columns, and it kept them all on the same line, with 75% of the row content off the screen.
Please help.

[ruenel]

Hello Jesse,

Sorry for the incorrect code.
Use this code instead:

@media screen and (max-width: 767px) {
    .x-section .x-row.swapcolumns .x-row-inner{
        flex-direction: row-reverse;
    }
}

We would love to know if this has worked for you. Thank you.

[VitalityCBD]

OK, that apparently works at 767, but not at 480 and smaller.
Any ideas that one?

[lely]

Hi Jesse,

Please add this too:

@media screen and (max-width: 480px){
.x-section .x-row.swapcolumns .x-row-inner {
    flex-direction: column-reverse;
    flex-wrap: nowrap;
}
}

Hope this helps.