Change responsive stacking order for one block

[RocktheHouse1876]

Hi there,

Would there be a way to change the stacking order of one item on a page? Basically, in the page section (Our Promise section for page in question), when responsive stacking begins I would like the right column to display first, then the left column (so, the personal letter block, and then biography block). Right now, the left column displays first and then the right column under it. Would this be possible?

[jade]

Hi @RocktheHouse1876,

There is currently no out of the box option available for the columns to switch their order on mobile. However, it is possible by adding a bit of customization.

Please do the following:

#1. Assign a class name to the row that contains the two columns. In this case, let’s assume that the class name you added is switch-on-mobile.

#2. Add this code in X > Theme Options > CSS:

@media (max-width: 767px) {
    .switch-on-mobile {
        display: flex;
        flex-direction: column;
    }

    .switch-on-mobile .x-column:nth-child(1)  {
        order: 2;
    }

    .switch-on-mobile .x-column:nth-child(2)  {
        order: 1;
    }    
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[RocktheHouse1876]

WOW…That’s brilliant! Thank you for this help!

[jade]

You’re most welcome, @RocktheHouse1876.