CSS在具有两到三列的响应式布局中包含不同数量的列

Question

我正在尝试将一些列样式div包装成一行。然后应用overflow：hidden;到该行，以使下一行中的任何浮动列排成一行。

<div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
</div>
<div class="row">
    <div class="col">Column 3</div>
    <div class="col">Column 4</div>
</div>
<div class="row">
    <div class="col">Column 5</div>
    <div class="col">Column 6</div>
</div>

然后使用：

.row{ overflow:hidden; }
.col{
    width:50%;
    float:left;
}

问题是，在更大的屏幕上我想有效地移动行div，所以我可以显示3列：

<div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
</div>
<div class="row">
    <div class="col">Column 4</div>
    <div class="col">Column 5</div>
    <div class="col">Column 6</div>
</div>

并使用：

.row{ overflow:hidden; }
.col{
    width:33%;
    float:left;
}

现在，我知道这不能在CSS中完成，但有没有其他方法可以使用CSS包装列或获得此效果我可以使用？我提出的最好的是使用额外元素的相当难看的版本：

http://codepen.io/djave_co/pen/EIHzt

如果你调整屏幕大小，你可以看到它的工作，但它不是很整洁或语义。

Answer 1

你想实现这样的目标吗？ - ＆GT;的 http://codepen.io/anon/pen/LwutG

CSS

.clear {clear: both;}

.col{
  border:2px solid #eaeaea;
  min-height:20px;
  margin-bottom: 10px;
  width:100%;
  float:left;
  box-sizing:border-box;
}


@media screen and (max-width:1400px) {
        .col {
     width: 33.333333%;
  }
}

@media screen and (max-width:800px) {
        .col {
     width: 50%;
  }
}

<强>更新

在所有cols上设置高度相等。的 http://jsfiddle.net/C86b8/