Binding grid order to class

[claudialn (Claudia Nathan)]

Hey all - I’m hoping someone can help me figure this out without a read-only link as I’m unable to share the client data in the design.

Basically I want to override the order of a div block inside a grid. Currently the grid and/or quick stack is built so that you can’t reorder div blocks based on class, only per breakpoint.

For context, I want the user to be able to switch to ‘mobile view’ when inside a desktop breakpoint, which requires moving the navbar on the left of 2 columns in front of the content, to last in 1 column (underneath the content).

Have tried every possible solution but can’t seem to bind the position/order of the div in one breakpoint without duplicating and hiding/showing based on class in an interaction.

[abirana (Abi Rana | Creative Web Developer)]

If you want to bind it to class/viewports you can just apply Custom Properties, which at the bottom of the Style Panel.

Please check the screenshot.

[claudialn (Claudia Nathan)]

Hey Abirana thanks for that! Will this work if I want this to act as a second ‘state’ though after triggering an interaction animation? Basically be able to move the left side bar panel that’s first (left of div in H flex) to second (bottom of div in V flex) after a button is clicked?