How to move elements when they don't fit on the screen

Viewed 51

I want to reorder elements similar to flex-wrap: wrap, but I want to reorder the elements. A good example would be Youtube. Go onto any Youtube video (like this one) on a non-mobile device. After shrinking the page, the recommended videos that were on the right side go between the description and the comment section. If they only used flex wrap, the recommended videos would go below the comment section. How would I do a similar thing?

I assume you would need some javascript, but I'm unsure as to how I would approach this. Thanks!

1 Answers

If you use display: flex, there's the order parameter for the flex-items (i.e. the children of the flex-container), with which you can define any order you want, also within a wrapped flex container. example: order: 3; on a flex item that should be third in order.

Related