Row: Reverse column order when layout specifies 1 column (but there are 2 or more cols within the row)

[TwoLuckyDucks]

Hi there!

(Love X/Pro… have unlimited licence for my business now).

Row element, reverse order of columns:

I understand that when I have a row with say 2 (or more) columns,
and set the row layout to 2 cols (eg. desktop),
and the row "reverse " on, the columns order is reversed just fine).

However, when I have a row with 2 columns,
and set the row layout to 1 col (eg. on mobile ),
and the “reverse” order (of columns) is ON, it is ignored… this seems silly to me.

There are still two columns, and I still want them reversed in order of display within the row (no matter what the layout says for a particular device, 1 or two (or more) columns).

Yes, I can duplicate the entire row and use customise/hide the two rows at different breakpoints to achieve this… but that is levels of extra complexity and a pain to keep all the edits in sync.

Yes, I could also add CCS similar to
@media screen and (max-width: 766.98px)
{
$el .x-row-inner
{
flex-flow: column-reverse ! important;
}
}

… but all this seems more complex than it should be, and harder to maintain…

The reverse order of columns within rows button/option should just work… regardless of the row layout at different breakpoints.
Or am I missing something?
Or… feature request please.

thanks in Advance
Simon

[ruenel]

Hello Simon,

Thanks for writing in! The Row element will only have a flex directions of either row (Standard) or row-reverse which is the (Reverse) option. It will not change into column-reverse because as intended, it is only Row element thus only having a row flexbox direction. If you want to have a reversed one column, you will have to use like this structure:

In your Column 1 element settings, enable the Flexbox and set the Direction and the Reverse option for specific screen sizes. This is possible with the Column element because you can have a Row or Column flexbox direction as intended to be.

Hope this helps.

[TwoLuckyDucks]

Perfect. Thank you Ruenel!

[ruenel]

You are most welcome, Simon.