Reorder Flexbox Items for Responsive Design

.flex-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap onto new lines */
  gap: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}

.flex-item {
  background-color: lightcoral;
  padding: 15px;
  min-width: 100px;
  flex-grow: 1;
}

/* Example reordering */
.item-A { order: 2; }
.item-B { order: 1; }
.item-C { order: 3; }

/* Media query example: change order on smaller screens */
@media (max-width: 600px) {
  .item-A { order: 1; }
  .item-B { order: 2; }
}

How it works: The `order` property in Flexbox allows you to change the visual display order of flex items, regardless of their order in the HTML source. Items are displayed in ascending order based on their `order` value, with items having the same order value arranged according to their source order. This is highly useful for responsive design, allowing you to prioritize or re-arrange content visually for different screen sizes or accessibility needs without altering the HTML structure.