Html 具有可变尺寸和位置元素的2列响应式布局

我想完成这种反应灵敏的布局，也可以将块按正确的顺序排列。如果你使用网格，只需要让整个右栏在左栏的下方，就很容易了，但是我想让单个块按正确的顺序分布

以下是它在大屏幕2列屏幕上的外观：

以下是它在较小屏幕1列上的外观：

块对齐：

1和4=左 2和3=右 5和6=中心 所有的区块都有不同的宽度和高度，我想实现这种定位——再一次——区块顺序很重要。 大屏幕上的列宽相同。。我只是画得有点太快了

我已经尝试使用不同的HTML和CSS标记来实现这一点，但每次都失败了。我还尝试使用javascript对DOM中的框进行重新排序，但遇到了问题，因为有些框还包含其他Java脚本和代码，这些脚本和代码在修改DOM后无法执行

---

因此，我正在寻找一个最简单的解决方案，最好只使用html+css，如果可能的话，不要使用javascript。

使用砌体进行管理

HTML:

使用jquery的Javascript：

$(document).ready(function() {
    $("#wrapper").masonry({
                         columnWidth: 380,
                          gutter: 20
                          });
});

---

示例可以在

中找到，我在那里找不到任何类型的模式。。。快速看一眼，它似乎需要某种人工智能。。你是根据什么来决定什么东西应该向左/向右堆叠还是居中对齐。。？不过，这需要一个完整的插件级代码……你可以忘记左/右/中对齐。。这可以用每个对齐都有类的div来完成，这不是问题。我的问题是如何使布局中的元素随机分布在两列中，但当它落在一列中时，元素的顺序应该是相同的-我猜可以用类似的砖石或smth来完成，但如何？

    #wrapper {
        width: 100%;
        max-width: 800px;
    }

    #wrapper > div {
        width: 40%;
        max-width: 350px;
    }

    #wrapper > div > div {
        display: inline-block;
        text-align: center;
        padding: 50px 0;
        background: #000;
        color: #fff;
    }

$(document).ready(function() {
    $("#wrapper").masonry({
                         columnWidth: 380,
                          gutter: 20
                          });
});