Dynamic Item Ordering with Flexbox 'order' Property

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

.item {
  padding: 15px;
  margin: 5px;
  background-color: #007bff;
  color: white;
  font-weight: bold;
  text-align: center;
}

/* Items will appear in the order of their 'order' value (lowest first) */
.item-a { order: 2; }
.item-b { order: 1; }
.item-c { order: 4; }
.item-d { order: 3; }

How it works: This snippet illustrates how to visually reorder items within a Flexbox container without modifying their HTML markup. By setting `display: flex` on the parent, its direct children can have their visual sequence controlled by the `order` property. Items with lower `order` values appear earlier in the layout. In this example, despite the HTML order, `.item-b` (order: 1) will appear first, followed by `.item-a` (order: 2), then `.item-d` (order: 3), and finally `.item-c` (order: 4).