title: Efficient way to place orphaned element(s) at top/beginning using CSS flexbox
body: <p>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 <code>flex: 1</code> is to stretch horizontally to fill the width - making the elements larger than previous rows. I want the same behaviour except I want the larger items to appear in the top row rather than the bottom row. </p>
  
  <p>I've come up with a solution (shown below) but it doesn't scale well and it feels like a bad hack. Is there a better (more elegant) way to achieve this layout? The solution needs to handle dynamic content; ie, I won't know the number of elements beforehand and I need to maintain the source ordering.</p>
  
  <p>It should look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/79TMJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/79TMJ.png" alt="flex orphans at top"></a></p>
  
  <pre><code>ul#subcategory_list {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;
  }
  
  ul#subcategory_list li:nth-child(1) {order: 30}
  ul#subcategory_list li:nth-child(2) {order: 29}
  ul#subcategory_list li:nth-child(3) {order: 28}
  ul#subcategory_list li:nth-child(4) {order: 27}
  ul#subcategory_list li:nth-child(5) {order: 26}
  ul#subcategory_list li:nth-child(6) {order: 25}
  ul#subcategory_list li:nth-child(7) {order: 24}
  ul#subcategory_list li:nth-child(8) {order: 23}
  ul#subcategory_list li:nth-child(9) {order: 22}
  ul#subcategory_list li:nth-child(10) {order: 21}
  ul#subcategory_list li:nth-child(11) {order: 20}
  ul#subcategory_list li:nth-child(12) {order: 19}
  ul#subcategory_list li:nth-child(13) {order: 18}
  ul#subcategory_list li:nth-child(14) {order: 17}
  ul#subcategory_list li:nth-child(15) {order: 16}
  ul#subcategory_list li:nth-child(16) {order: 15}
  ul#subcategory_list li:nth-child(17) {order: 14}
  ul#subcategory_list li:nth-child(18) {order: 13}
  ul#subcategory_list li:nth-child(19) {order: 12}
  ul#subcategory_list li:nth-child(20) {order: 11}
  ul#subcategory_list li:nth-child(21) {order: 10}
  ul#subcategory_list li:nth-child(22) {order: 9}
  ul#subcategory_list li:nth-child(23) {order: 8}
  ul#subcategory_list li:nth-child(24) {order: 7}
  ul#subcategory_list li:nth-child(25) {order: 6}
  ul#subcategory_list li:nth-child(26) {order: 5}
  ul#subcategory_list li:nth-child(27) {order: 4}
  ul#subcategory_list li:nth-child(28) {order: 3}
  ul#subcategory_list li:nth-child(29) {order: 2}
  ul#subcategory_list li:nth-child(30) {order: 1}
  </code></pre>