2列响应式布局，具有可变大小和定位元素

Question

我想完成这种响应式布局，这也会使块按正确的顺序排列。如果你使用网格很容易，只需让整个右列在左下方为一列，但我想让单个块以正确的顺序分发。

以下是大屏幕（2列）的外观：

以下是它应该在较小的屏幕（1列）上显示的方式：

块对齐：

• 1＆amp; 4 =离开
• 2＆amp; 3 =对
• 5＆amp; 6 =中心

所有的块都有不同的宽度和高度（随机），我想要实现这种定位 - 再一次 - 块顺序很重要。 （大屏幕上的列宽是相同的......我只是画了一点太快了）

我已经尝试用不同的HTML＆amp; CSS标记但每次都失败。我还尝试使用javascript重新排序DOM中的框但有问题，因为有些框还包含其他javascripts和代码，这些代码在修改DOM后无法执行。

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

Answer 1

使用砌体进行管理。

HTML：

<div id="wrapper">
    <div style="margin-top:0px; text-align: left"><div style="width:70%;height: 200px">1</div></div>
    <div style="margin-top:50px; text-align: right"><div style="width:80%;height:170px">2</div></div>
    <div style="margin-top:50px; text-align: right"><div  style="width:60%">3</div></div>
    <div style="margin-top:50px; text-align: left"><div  style="width:40%; height:150px">4</div></div>
    <div style="margin-top:50px; text-align: center"><div  style="width:60%">5</div></div>
    <div style="margin-top:50px; text-align: center"><div  style="width:80%;height:100px">6</div></div>
</div>

CSS：

    #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;
    }

Javascript（使用jquery）：

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

示例可在http://jsfiddle.net/sinusiks/w99te/4/

找到