Css 以正确的顺序在3列中显示flex块

使用flexbox或任何其他css技术都不需要将每一列放入包装器中，这样的事情是否可以实现

最佳结果将它们按正确的顺序对齐，但第四个元素位于最长容器下方，而不是位于其上方的元素下方

我正在使用指南针，目前我的SCS是：

  ul.level0 {
    @include display-flex;
    @include flex-flow(row wrap);
    @include justify-content(flex-end);
    @include align-items(flex-start);
    @include align-content(flex-start);

    .menu-group {
      @include display-flex(inline-flex);
      vertical-align: top;
      width: 33.33%;
      margin-bottom: 30px;
      padding: 0 5px;

      li {
        display: block;
        text-align: left;
        margin-bottom: 3px;
      }

      .group-title {
        margin-bottom: 12px;
        text-transform: uppercase;
      }
    }
  }

---

您可以使用柔性缠绕、柔性方向和顺序：

ul{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：300px；
边缘：1米；
填充：0；
列表样式类型：无；
}
高度：80px；
边框：实心；
宽度：30%；
边缘：1米；
顺序：5}
李：第n个孩子（单数）{
高度：40px；
}
李：第一个孩子{
身高：100%；
}
李：第n个孩子（1）{
订单：1
}
李：第n个孩子（2）{
订单：2
}
李：第n个孩子（3）{
订单：4
}
李：第n个孩子（4）{
订单：3
}
李：第n个孩子（5）{
订单：5
}

一,
二,
三,
四,
五,

不，它分成几行，所有元素都有相同的高度（行上最高的设置高度）事实上元素的高度是正确的，它们没有拉伸到与行高匹配的高度（不适应最大的元素）事实上它与flex wrap和order是一致的，我的错误：）有趣，它在codepen中工作，但不在我的页面中，弯曲方向：立柱；只需将所有li元素1放在1列中其他元素的下方即可。@pankijs这是因为列方向需要明确的高度才能强制换行。令人遗憾的是，这样好的答案通常只能获得很少的收益recognition@NicoO答案有点有效，但在我的情况下不正确，涉及到固定高度，但我需要通用的解决方案，因为列的高度随内容而变化，所以没有固定的高度。我对这个答案投了赞成票，但它不适合我。最终使用jquery和绝对位置：（@pankijs）你能举一个内容（假或真）与你必须处理的内容相近的html例子吗？