Visually Reorder Flex Items with CSS `order`

.flex-container {
  display: flex;
  flex-direction: row;
  border: 2px dashed #ddd;
  padding: 10px;
  gap: 10px;
}

.flex-item {
  padding: 15px;
  background-color: lightblue;
  border: 1px solid steelblue;
  flex: 1; /* For demonstration, items grow to fill space */
}

.item-a { order: 2; background-color: lightcoral; }
.item-b { order: 3; background-color: lightgreen; }
.item-c { order: 1; background-color: lightgoldenrodyellow; }

How it works: This snippet shows how to visually reorder flex items using the `order` property. By default, flex items have `order: 0` and are displayed in their source order. Assigning different integer values to `order` (lower values come first) allows you to arbitrarily change their visual sequence without altering the HTML structure. This can be useful for responsive layouts where content needs to appear in a different order on smaller screens, but care must be taken regarding accessibility as screen readers follow source order.