複数のinline-block要素をCSSだけで左上詰めで逆順に並べたい！

Question

複数のinline-block要素をCSSだけで左上詰めで逆順に並べたい！

折り返しが発生して行が多段になる可能性のある複数のinline-block要素をjavascriptを使わずcssだけで左上詰めで逆順に並べたいです。

試した方法は折り返された各行の要素数がすべて同じなら一見うまくいっているように見えますが最後の行の要素数が違うと希望通りの結果になりません。

↓もとの並び（ウィンドウサイズによって表示が異なります）

a b c d e f g
h i j k

↓目標（ウィンドウサイズによって表示が異なります）

k j i h g f e
d c b a

ベースとなるコード

inline-block要素の数は可変です

<ul><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li><li>f</li><li>g</li><li>h</li><li>i</li><li>j</li><li>k</li></ul>

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 200px; /* 任意のサイズ */
    height: 200px; /* 任意のサイズ */
}
/* 色 */
ul {
    background-color: silver;
}
li {
    background-color: aqua;
}
li:nth-of-type(2n) {
    background-color: lime;
}

試したこと

1

追加するcss

ul {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
}

↓こうなる（ウィンドウサイズによって表示が異なります）

k j i h
g f e d c b a

2

追加するcss

ul {
    rotate: 180deg;
}
li {
    rotate: 180deg;
}

↓こうなる（ウィンドウサイズによって表示が異なります）

      k j i h
g f e d c b a

3

追加するcss

ul {
    writing-mode: vertical-rl;
    direction: rtl;
    text-align: left;
}
li {
    writing-mode: horizontal-tb;
    direction: ltr;
}

↓こうなる（ウィンドウサイズによって表示が異なります）

k i f c
j h e b
  g d a

Answer 1

無理やりですが、一応できそうです。

ul {
    display: flex;
    flex-wrap: wrap;
}
li:nth-last-child(1){order:1}
li:nth-last-child(2){order:2}
li:nth-last-child(3){order:3}
li:nth-last-child(4){order:4}
li:nth-last-child(5){order:5}
li:nth-last-child(6){order:6}
li:nth-last-child(7){order:7}
li:nth-last-child(8){order:8}
li:nth-last-child(9){order:9}
li:nth-last-child(10){order:10}
li:nth-last-child(11){order:11}
li:nth-last-child(12){order:12}
li:nth-last-child(13){order:13}
li:nth-last-child(14){order:14}
li:nth-last-child(15){order:15}
li:nth-last-child(16){order:16}
li:nth-last-child(17){order:17}
li:nth-last-child(18){order:18}
li:nth-last-child(19){order:19}
li:nth-last-child(20){order:20}
li:nth-last-child(21){order:21}
li:nth-last-child(22){order:22}
li:nth-last-child(23){order:23}
li:nth-last-child(24){order:24}

https://jsfiddle.net/kdnwop83/

Comments

[_._]

ありがとうございます。要素数の上限がわかっているばあいは使えそうです。
```css
ul {
display: flex;
flex-wrap: wrap;
counter-reset: count;
}
li {
counter-increment: count -1;
order: counter(count);
}
```
みたいなことができればどんな要素数にも対応できそうなのですが