35. Changing the visual order with flexbox - Responsive CSS Tutorial
This tutorial is a part of "The Responsive Web Design Bootcamp" on Scrimba. Explore the full course here: https://rebrand.ly/responsivebootcamp_yt
The order property is one that gets unlocked when we use display: flex. We can apply it to any of the direct children of our flex container, and it allows us to visually change the order of things while keeping the markup in a more logical sequence.
The default order of an element is 0.
Important considerations to make with order
Don't use order to change the visuals to make it easier to read. The reading sequence needs to make sense in the HTML, and we can then use order to rearange things because we also can play with the visual hierarchy and play with how people will look at the information. Keep your HTML in the right sequence, and then use order to play with it visually and not the other way around!
If you'd like to read more on why this is important, I'd suggest checking out the article Skip to search Skip to navigation Flexbox & the keyboard navigation disconnect