将多个轮播项目合并到Flex网格中

Question

考虑以下HTML：

<div class="wrapper">
    <div class="carousel">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="carousel">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

如果我的课不清楚，这里有两个基本的轮播...但是，如果我们想（在桌面屏幕上）将这些.itemdiv从.carousel父级中分离出来，并以自定义顺序将它们合并到一个flex网格中（无需操作） JS的DOM）。

这是什么应该看起来像桌面屏幕（不同颜色的瓷砖代表从不同的旋转木马项目）：

注意：如上所述，这很容易用javascript实现，我试图确定是否有可能在没有javascript的情况下实现