Dynamically Reorder Flex Items with the `order` Property

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  padding: 15px;
  margin: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

.item-1 {
  order: 2; /* Visually appears second */
}

.item-2 {
  order: 3; /* Visually appears third */
}

.item-3 {
  order: 1; /* Visually appears first */
}

How it works: The `order` property in Flexbox allows you to resequence items visually, independent of their order in the source HTML. Items with lower `order` values appear earlier in the layout. This is incredibly useful for responsive design, where the visual flow of elements might need to change based on screen size, or for accessibility, to present information in a logical order without complex DOM manipulation. By default, all flex items have an `order` of 0.