CSS动态定位6块

Question

随着屏幕尺寸的变化，我刚刚问了a question关于三个块的动态CSS定位问题。在我发布之前我试图简化这种情况，现在我觉得自己是个白痴，因为我刚刚意识到我实际需要的是六块：

<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
<div class="block">D</div>
<div class="block">E</div>
<div class="block">F</div>

3 block solution在这里不起作用，因为我不能在div中包裹A + B，C + D，E + F并且还包裹A + B + C和D + E + F.它需要重叠<div> s。我该怎么办？请帮忙！

我理想的解决方案是纯CSS（媒体查询）或最小Javascript（pref。无库）。

---

编辑：要明确的是，我所追求的是一个解决方案，当屏幕宽度动态更改框的布局时（如上图所示）变化。

此外，我不想要：

AB       ABC
CD       DEF
EF

Answer 1

使用Bootstrap或Foundation的网格系统怎么样？

如果是bootstrap：

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-6">
        <div class="block">A</div>
        <div class="block">B</div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="block">C</div>
        <div class="block">D</div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="block">E</div>
        <div class="block">F</div>
    </div>
</div>