Html 合并'；订单'；使用flexbox'；行反转'；实现所需的动态布局

我正在尝试实现一个容器，其包装方式如下所示：

<div style='display: flex; flex-wrap: wrap; width: 100px; border: 1px solid !important;'>
  <div class='title' style='border: 1px dotted;'>Title text long</div> 
  <div class='size' style='border: 1px dotted;'>Large</div>  
  <div class='price' style='margin-left: auto; border: 1px dotted;'>£4.00</div>
</div>

标题文本长度
大的
£4.00

当标题较短时，如下图所示

---

我希望的一种方法是在主flex容器上使用一种类型的

行反转

，并使用

顺序：-1，但顺序不会覆盖行反转。我已经玩了一段时间的选项，现在开始怀疑它是否可能与CSS只。JS解决方案仍然很有用，但如果可能的话，只使用CSS会更受欢迎。
如果可以调整HTML代码，float可以：


.box{
宽度：100px；
边框：1px实心；
溢出：自动；/*清除浮动*/
}
.box>*{
边框：1个点；
浮动：左；
}
.box>.price{
浮动：对；
}
.尺寸{
清除：左；
}

标题文本长度
£4.00
大的
标题文本
£4.00
大的
标题文本
£4.00
大的
这是个好主意。唯一的缺点是，正如您在第三个框中所演示的，当它的宽度足以容纳所有三个元素时，它会全部包装成一行。对于我的使用，我希望它保持在底部，即使容器对于所有三个都足够宽，但正如我所说的，我不知道这是否只有CSS才可能。感谢you@DevOverflow你想
large
始终保持在底部吗？是的，供我使用；整个容器将在产品缩略图下使用。@如果在这种情况下更容易，请检查更新