Swap Column Order Single Row 3 Columns

Support
#1

Hello,

I have this code:

@media (max-width: 767px) {
.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;
}
}

Which works on a single row with two columns in mobile view.
But it it has three columns, it swaps them but leaves them side by side.
It removes the stacking in mobile view and squishes everything onto a single row.
Anyway you know of to fix the code?

Thank you!

Jesse

#2

Same thing happens with columns with four rows

#3

Hello Jesse,

Please update the code to:

@media (max-width: 767px) {
    .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;
        flex-wrap: wrap;
    }
}

What was missing is the flex-wrap: wrap;

https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp

Hope this helps.

#4

This doesn’t appear to have worked.
It’s not registering the swap at all anymore.

#5

Hey Jesse,

Please use this code instead:

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

In small devices the rows becomes the columns so you need to add flex-direction: column-reverse to reverse the columns.

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

#6

OK, that worked perfectly, thank you!

#7

You are most welcome. :slight_smile:

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.