Hi, I understand flex-direction changes the order of the flex items in their flex container. But why do we need to change the order when we could actually put their order in a correct position at first, eg, red is at the left and blue is at the right?
A common use case is when building user interfaces that look different on a mobile device vs a desktop device. e.g. on Mobile you may want the layout to be a column, however on a big desktop screen you might want it to be in a row.
flex-direction is mainly used for switching between row and column, the use of reverse is much less common. Both semantically and accessibility wise, it really isn’t ideal to change element order using CSS.
There are plenty of layouts that start with a horizontal row layout and when the screen gets too narrow switches to a vertical column layout. Flexbox is great for that type of layout switch. It also has nice element wrapping support where the elements will wrap to a new line (or column) as needed.