css填充缺少内容留下的空格

Question

我遇到这种情况，即动态内容在指定区域内没有正确填满，所以我需要填写它才能正确放入。

我在这里做了一个小提琴http://jsfiddle.net/yvK2h/1/，这样你就可以看到我想做的事了。我希望第3段置于第1段之下并填补第1段下面的空白。

的CSS：

.row {width:50%; float:left;}

html：

<div class="row">1. </div>
<div class="row">2. </div>
<div class="row">3. </div>
<div class="row">4. </div>

没有javascript只能使用css吗？

更新：

请考虑我无法添加列，因为我可能有4或7列，并且不一定按相同的顺序排列。例如，如果隐藏col 3，则列4可能位于col 1下。

Answer 1

像这样？

http://jsfiddle.net/yvK2h/4/

.row {
width:50%;
float:left;
}
@media screen and (max-width: 650px) {
.row {
    width:100%;
    float:none;
    margin:0 0 30px 0
}
}