Request: column layout and flex-direction

Beta
#1

Coming from one of my most popular tips from the XTT days, users love the “swap columns on mobile” CSS.

In Pro, it might be beneficial to move the “reverse” toggle to the layout section instead of making it a global setting, thereby allowing users to do this without custom CSS.

#2

+1 Probably there must be a flex option called ORDER. Each column must have an ORDER option, so columns order might be switched during breakpoints.

@media {max-width:767px) {
  .col-01 {
    display: flex;
    order: 1;
  }

  .col-02 {
    display: flex;
    order: 2;
  }
}

@media {min-width:768px) {
  .col-01 {
    display: flex;
    order: 2;
  }

  .col-02 {
    display: flex;
    order: 1;
  }
}

something like that

#3

Order is indeed a valid attribute, but more prone to user error. Also, the breakpoint settings are on the row itself, making a simple reverse toggle much easier to implement.

order makes more sense for fine tune control, but they would have to then add a breakpoint layout setting to each column as well.

#4

I think this option might be usefeul. (flex-direction: row | row-reverse | column | column-reverse)
But for me, order option is much more useful :slight_smile:

#5

I am trying to understand the problem here. Excuse me if I am slow. :slight_smile:

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

#6

You are right. It’s because the REVERSE option is a global option and it works at any breakpoint, not only on mobile or desktop.

(that is why i m talkin about ORDER option)

#7

Whoops. My bad. The reverse option just wont work after 767px and smaller.
But, anyway, it cannot be set because at 767px and smaller your row will have 1 column layout, so you can reverse nothing because it got only 1 column ) so Order option must be here )

1 Like
#8

Sorry Misho, I meant having the ability to set where reverse occurs, since you can go to a single col layout at any breakpoint now.

1 Like
#9

Howdy @michaelbourne, @Georgich and @Misho!

Thanks for chiming in on this. There’s a little section in the new changelog entry that discusses this, and is basically what @Misho mentioned. We thought having a one-time reverse would make things a little less daunting than seeing it on every breakpoint since we weren’t entirely sure how much it’d be used, and it would still allow for the most common situations of Text/Image then Image/Text on desktop and then wanting them to both be Text/Image on mobile for example (which is basically what you’re saying @michaelbourne, they would be able to do that with this).

I’m very open to adding the control to every breakpoint in some way as I think it has merit. Can you all think of any additional situations other than the one myself and @Misho have mentioned above? Are there situations where you might have a layout reversed, then not, then reversed again?

#10

Wanted to add an additional thought here. No later than the Theme Options reboot cycle, possibly earlier, we want to offer a way to adjust any styling control at a per breakpoint level. So there is a more natural way to manipulate that “reverse” toggle per breakpoint planned.

1 Like