CSS FLEX — Change item order, but only if wrap occurs
I would like to reorder flex items but only if it's wrapped. The only way I see now is to go to Inspect and note the viewport width at which wrapping occurs, and then add media query with order property added to the item in subject.
Is there a "natural" way of achieving this, through a property and not query? I might change the paddings, margins, etc. down the road, so I would need to search and edit the breakpoint each time in the query. Thanks!
2 Replies
the only option other option than flex-wrap: wrap is flex-wrap: wrap-reverse. in stead of going below, it goes above
if the order has to change more than that, i can not see another option then via media queries with the order-propery or if you switch to grid, you can assign a specific row/column/area
flex-wrap: wrap-reverse; is just what I need since I have two items in a flex only. I tried with row-reverse, column-reverse etc. but felt it's not the right way.
Also, for a beginner like me, knowing what can't be done is valuable as much as knowing what can. Many thanks!