如何在底部有非满行时快速反转Flexbox项目顺序？

我有一个Flexbox容器，包含数量可变的项目（示例为14个，实际约128个），初始布局如下：

-----------------
|  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         |
-----------------

尝试过的方案及问题 #

1. CSS方案：使用flex-wrap: wrap-reverse; + flex-direction: row-reverse;，但非满行会跑到顶部，不符合需求：

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

2. JavaScript方案：通过修改order属性反转顺序，代码如下：

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

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

该方案能实现布局，但点击反转按钮时，项目会逐个移动，视觉效果不佳，需要实现即时反转的效果。

Demo代码 #

CSS

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 60px;
}

.item {
  width: 330px;
  max-width: 330px;
  height: 400px;
  margin: 15px;
  position: relative;
}

HTML

<div class="flexbox-container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
  <div class="item item-4"></div>
  <div class="item item-5"></div>
  <div class="item item-6"></div>
  <div class="item item-7"></div>
  <div class="item item-8"></div>
  <div class="item item-9"></div>
  <div class="item item-10"></div>
  <div class="item item-11"></div>
  <div class="item item-12"></div>
  <div class="item item-13"></div>
  <div class="item item-14"></div>
</div>

内容的提问来源于stack exchange，提问作者Such Max