How to change order of grid items/columns with variants?

Design help General
1

Hi everyone,

I have setup a component for a simple 2 column layout for my site (heading/body text on left; image on right).

I would like to make a variant with the content reversed (so image is on the left; heading/body text on right). I have tried everything I can think of and cannot figure this out…

Whenever I change the order of the content in a variant, it changes for all… making me realize this is not a property that can be stored in a variant.

How would I make a component so I have a variant for the “image on left” vs “image on right” variants?

Thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Structure your component like this-

DIV layout container  
  DIV content container 
  DIV image container

Make the layout container flex horizontal.

On your variant, enable the reverse flow on that flex element.
That will put image left, content right.

3

Thank you for your quick reply! I think I’m missing something…

When I just add these into a main div, the other div’s show up on top of each other… Should I be adding a “column” or “grid” element?

I’m not sure if I need to add something or some other setting is wrong.

Here’s my initial results:

Screenshot 2024-12-29 at 8.57.26 AM
Screenshot 2024-12-29 at 8.57.26 AM1586×624 31.6 KB

And I tried adding columns, but order didn’t change then using this method…

Screenshot 2024-12-29 at 8.57.13 AM
Screenshot 2024-12-29 at 8.57.13 AM814×790 18.2 KB

I assume the setting to change the direction is the one in the screenshot?

Screenshot 2024-12-29 at 8.57.04 AM
Screenshot 2024-12-29 at 8.57.04 AM500×1102 55.2 KB

4

That would be a different layout issue, where you’ve given your elements relative or absolute positioning. You don’t want that. Everything in this construction should be the natural, default, static positioning.

Correct. It must be a flex, columns, grids, quickstack etc. do not have the HTML reverse direction feature we’re using here, though in some cases I suspect that typography RTL can be used as a hack.

5

Got it now!

Awesome, thank you very much @memetican

1 Like