Re-order flexbox on mobile

Ask us anything
1

Hello WeWeb community.

We have a Section with Columns and then Flexboxes within each Column. We’re trying to re-order the Flexboxes just on mobile (without affecting desktop/tablet view). First attempt was to re-organize in the navigator (thinking that it might only affect mobile) but that affects all screens.

image

We imagine we’ll need to add custom CSS but our efforts so far have not been fruitful. We’ve searched the community and watched various videos but also haven’t seen this particular question answered yet - maybe we’re missing it! We appreciate any feedback and guidance!

2

on mobile breakpoint, select the column, change the reverse order to: on

Screenshot 2022-09-22 at 1.59.07 AM
Screenshot 2022-09-22 at 1.59.07 AM1096×358 21.7 KB

1 Like
3

holy smokes… :man_facepalming:

WeWeb never surprises with how easy they make things. Thank you very much @khairul for your quick and very clear guidance. can’t believe we missed that option.

quick follow up for the future: if we have 3 (or more) columns and say we wanted to slide the bottom to middle and middle to bottom (leaving the top at the top), is there an easy to way to mix-and-match the order through WW?

4

I think you need to decide which columns are gonna be reversed, and set them together in a column.

For example you have 3 columns, the original alignment is 1,2,3, you want to set them to 2,1,3.

You have to put 1 and 2 into a single column.

Imagine a bracket is a column. So put ((1,2),3).

When reversing set the (1,2) column to reverse.

Of course when sizing it, put the 1,2 column width/height as 2/3 or 66.66%. Then I think you should achieve what you need.

1 Like
5

thanks again @khairul i appreciate you taking the time to spell that out.

it makes total sense. we’ll continue to proceed forward now with this insight.

1 Like