Dynamic Ordering of Flexbox Items

.flex-container {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  background-color: #f0f0f0;
}

.flex-item {
  flex: 1;
  padding: 15px;
  margin: 10px;
  background-color: white;
  border: 1px solid #ddd;
  text-align: center;
}

/* Example: Change order for specific items */
.item-a {
  order: 2;
  background-color: #e0f7fa;
}

.item-b {
  order: 1;
  background-color: #fffde7;
}

.item-c {
  order: 3;
  background-color: #fce4ec;
}

/* Responsive adjustment: put item-a first on small screens */
@media (max-width: 600px) {
  .item-a {
    order: -1; /* -1 ensures it's before any item with order 0 (default) */
  }
}

How it works: This snippet illustrates how to dynamically reorder items within a Flexbox container using the `order` property. By default, flex items are arranged in the order they appear in the source HTML (order: 0). Assigning a positive or negative integer to the `order` property changes an item's visual position; items with lower `order` values appear first. This is incredibly useful for responsive design, allowing you to visually rearrange elements for different screen sizes without modifying the underlying DOM structure. A common use case is promoting or demoting critical content based on screen real estate, as shown in the media query example.