What is the order property in Flexbox?

Question

Accepted Answer

order reshuffles the visual sequence of flex items without touching the HTML — items are laid out by ascending order value.
Every flex item has order: 0 by default, and the browser draws them in source order. Give an item a different order and it jumps in the visual sequence; ties are broken by source order.
.item { order: 0; }              /* default */
.item:first-child { order: 1; }  /* pushed to the end */
.item:last-child  { order: -1; } /* pulled to the front */

Where it's useful: responsive designs that need to rearrange blocks at different screen sizes — e.g. moving a sidebar above the content on mobile — without duplicating or rewriting the markup.
Accessibility caution: screen readers and keyboard tab order follow the HTML order, not the visual order. So a sighted user and a keyboard user can experience the content in different sequences. Use order sparingly, and never to fix a problem you should solve by reordering the HTML itself.