Visually Reordering Flexbox Items with `order`

.flex-container {
    display: flex;
    gap: 10px;
    border: 1px solid #ccc;
    padding: 10px;
}

.item {
    background-color: lightgoldenrodyellow;
    padding: 15px;
    border: 1px dashed orange;
}

/* Visual reordering */
.item-1 { order: 3; /* Will appear last */ }
.item-2 { order: 1; /* Will appear first */ }
.item-3 { order: 2; /* Will appear in the middle */ }
/* Default order for items without 'order' is 0 */

How it works: This snippet demonstrates how to visually reorder Flexbox items using the `order` property. Items with a lower `order` value appear before those with a higher value. Items without an `order` property (or with `order: 0`) will appear first, in their source order, before any items with positive `order` values. This is powerful for responsive design, allowing you to change layout order without altering the HTML structure. Remember to consider accessibility, as screen readers follow source order.