/* HTML structure:
<div class="flex-container-order">
  <div class="item item-a">Item A (Order 3)</div>
  <div class="item item-b">Item B (Order 1)</div>
  <div class="item item-c">Item C (Order 2)</div>
  <div class="item item-d">Item D (Default Order 0)</div>
</div>
*/

.flex-container-order {
  display: flex;
  border: 1px solid #ccc;
  padding: 15px;
  justify-content: space-around;
  background-color: #ffffe0;
}

.item {
  background-color: #ffdab9;
  border: 1px solid #ffa07a;
  padding: 10px;
  margin: 5px;
  text-align: center;
  min-width: 100px;
}

/* Items with lower `order` value appear first. Default order is 0. */
.item-a {
  order: 3; /* Will appear after items with order 0, 1, 2 */
}

.item-b {
  order: 1; /* Will appear first among custom ordered items (after default order 0) */
}

.item-c {
  order: 2; /* Will appear after item-b, but before item-a */
}

.item-d {
  /* order: 0; is the default, so it appears before any item with a positive order value */
  /* If multiple items have the same order, their source order is preserved */
}

/* Example of reordering on smaller screens */
@media (max-width: 600px) {
  .flex-container-order {
    flex-direction: column; /* Stack items vertically */
  }
  .item-a { order: 1; } /* Make A appear first in column */
  .item-b { order: 3; } /* Make B appear third */
  .item-c { order: 2; } /* Make C appear second */
  .item-d { order: 4; } /* Make D appear last */
}