Efficient way to place orphaned element(s) at top/beginning using CSS flexbox

Question

When you use flexbox wrap to create a grid and you have a last row with less elements than the previous rows the default behaviour of \"orphaned\" elements with flex:

Answer 1

Assuming you want to get rid of the nth-child CSS rule listing, there is no 1-liner that does that.

If you generate the items dynamically, you could add the order property inline, and if you don't know in advance how many items, you could start from a value that you for sure never exceed, i.e. 1000 and then go downwards.

Stack snippet

ul#subcategory_list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
}

ul#subcategory_list li {
  flex: 1 1 25%;
  border: 1px solid gray;
  box-sizing: border-box;
}

<ul id="subcategory_list">
  <li style="order: 1000">1</li>
  <li style="order: 999">2</li>
  <li style="order: 998">3</li>
  <li style="order: 997">4</li>
  <li style="order: 996">5</li>
  <li style="order: 995">6</li>
</ul>