RC4 Swap columns on mobile

What’s the best way to do this now? I like the choosing column width/amount per device, but toggling whether to switch them would be good too.

My usual way of doing flex-direction: row-reverse; or flex-direction: column-reverse; on the row doesn’t seem to work any more because of the .x-row-inner and the native flex that it uses from the builder.

This is possible thanks to the new “Reverse” option.

When two rows are added, for example Text|Image, Text|Image, if the second row has the “Reverse” checkbox checked, it will revers order, being Text|Image, Image|Text, but on mobile will again be Text|Image, Text|Image.

I’ve seen that but not per breakpoint? Unless I’m being blind!

Nothing per break point at the moment except the column settings :frowning: Apparently it is coming just not yet.

That’ll be useful when it is! Had issues with the CSS with the extra div that’s included in the rows now, so a toggle per break point will be ideal!

Hi @RubberDuckers,

Was great to meet you in London last week! Hope you’re doing well. To confirm, no this isn’t possible in the inspector, but as @urchindesign mentioned it is something that will be possible in the future. Our goal is to make all styling controls adjustable per breakpoint. This is similar to how competing builders allow you to adjust things like spacing at different screen sizes.

Because the new row uses flexbox, this is pretty easy to do by assigning an order to the Column with custom CSS. Inspect a Column, then go to Element CSS and enter this:

@media (max-width: 480px) {
  $el { order: 1; }
}

If you set an order of 1 on the first column, it will move to the second position. It’s not quite reversing the order, but does give you final control over where things are placed.

1 Like

Hey @alexander - And good to meet you too!
Hope you enjoyed the rest of your stay :slight_smile:

And that’s cool, cheers, will give that a go!

Can’t wait for all the new stuff :tada:

Thanks! Sounds good :slight_smile: