Css 如何将div定位为3列，在窄屏幕上重新定位为2列

是的，我知道这个问题的标题很糟糕。请随意改进它

我正在尝试为具有以下要求的页面构建CSS

• 有六个“盒子”
• 每对盒子的总高度相等
• 中间的一对（框3和框4）高度相等
• 它们应该按照下面的模型进行排列，在宽屏幕上分为三列
• 它们应按照下面第二个模型，分为两列进行排列
• 在非常窄的屏幕上，它们应该全部排列在一列中
• 盒子和它正下方/正上方的盒子之间应该没有间隙
• 我试图用Twitter引导来完成它，但这不是一个要求
• 与CSS+JQuery/其他JS解决方案相比，我更喜欢100%的CSS解决方案
• 不幸的是，对于一个必须在IE8+中工作的公司网站来说，IE7也不错，不过如果我们有合理的后备方案，IE7也不是必须的

---

这里有一个jsFiddle供您使用：

您可以通过组合

列计数和媒体查询来实现这一点：

.inner{
    width: 100%;
    display: inline-block;
}

#outer{
    column-count:3;
    -webkit-column-count:3; /* Safari and Chrome */
    -moz-column-count: 3; /* Firefox */
}

@media (max-width: 600px) {
      #outer{
        column-count:2;
        -webkit-column-count:2; /* Safari and Chrome */
        -moz-column-count: 2; /* Firefox */
    }
}

@media (max-width: 300px) {
      #outer{
        column-count:1;
        -webkit-column-count:1; /* Safari and Chrome */
        -moz-column-count: 1; /* Firefox */
    }
}

演示：

列计数的浏览器兼容性
：
考虑发布任何代码片段。说得对。我构建了我当前（可怜的）进度的“演示”版本，并将其放在JSFIDDLE上。它的顺序必须是那样，还是改变框的顺序是可以接受的？它必须最终使两列的总高度相同@这是一个有趣的尝试。我不知道
列计数
。我会调查的……我更新了小提琴，以说明我的其他要求（不同的高度和事实上必须没有差距）在Chrome、Firefox和IE10中工作完美。可悲的是，我也必须支持旧的IE版本，有没有办法让它在那里工作？我不知道。你可以有一个js后备方案。