无需使用order属性，实现flex row-reverse+wrap-reverse的反向排列

Got it, let's work through this. You've set up a flex container with row-reverse and wrap-reverse, but need to flip the element order one more time—no order property allowed. Here's a clean CSS-only fix that keeps your HTML structure intact:

Modified CSS Code #

.a { 
  height: 200px; 
  width: 520px; 
  padding: 5px 5px 5px 10px; 
  display: flex; 
  flex-wrap: wrap-reverse; 
  flex-direction: row-reverse; 
  background-color: black;
  /* Flip the entire container horizontally to reverse order again */
  transform: scaleX(-1);
}
.b { 
  min-width: 120px; 
  height: 90px; 
  text-align: center; 
  line-height: 90px; 
  margin-right: 5px; 
  background-color: aquamarine;
  /* Flip each child back to keep text readable (no mirrored content) */
  transform: scaleX(-1);
}

How It Works #

• The transform: scaleX(-1) on the .a container reverses the entire flex layout along the horizontal axis, which effectively undoes the row-reverse ordering while preserving the wrap-reverse behavior for rows.
• Applying the same transform to each .b element flips their content back to normal—this ensures your numbers (or any text inside the elements) don't appear mirrored and stay readable.

If you're open to adjusting your HTML structure instead, you could also reverse the order of the .b elements directly (swap 1 ↔ 6, 2 ↔ 5, 3 ↔ 4), but the transform method lets you keep your original markup unchanged.

内容的提问来源于stack exchange，提问作者Abu Taha