我有一个flexbox容器，里面有大约128个项目（数量可以改变）。我在这里使用14个。它们是这样的：

-----------------
|  1  2   3   4 |
|  5  6   7   8 |
|  9 10  11  12 |
| 13 14         |
-----------------

我试图实现的是颠倒顺序，这样，如果项目的数量不能被4整除，则项目总是向左对齐，而半空的行总是在底部，并且项目不会以任何方式拉伸。如下所示：

-----------------
| 14 13  12  11 |
| 10  9   8   7 |
|  6  5   4   3 |
|  2  1         |
-----------------

我试着做flex-wrap: wrap-reverse;和flex-direction: row-reverse;，但在顶部留下了一个半空的行。

-----------------
| 14 13         |
| 12 11  10   9 |
|  8  7   6   5 |
|  4  3   2   1 |
-----------------

在没有找到任何解决方案之后，我求助于JavaScript，在那里我试图正确地更改顺序。

let itemsCount = $('.flex-container').children().length;

for (let item of $('.flex-container').children()) {
   item.style.order = itemsCount;
   itemsCount--;
}

这确实起作用了！嗯，有点..因为当我按下反向按钮时，我可以看到每个项目在for循环中是如何移动的，它看起来非常丑陋。我需要它是即时的。
这可能是一个初学者的错误，所以我真的不想在这里问，但经过几个小时的不成功的尝试，我放弃了。任何反馈是非常感谢。

示范：

第一个