html - 响应式布局和列 float 问题

Question

我正在尝试使用 Bootstrap 3.2.0 在单行中使用一系列平铺 div 来实现此布局，适用于 > 768px 宽的屏幕。 div 高度可以是单倍高度也可以是双倍高度，在本示例中我将其设置为 50px 和 100px 并且 div 宽度由类 col-sm-x 控制:

到目前为止，我最好的尝试是使用以下标记和 CSS:

CSS

.red{ background-color: red; }
.blue{ background-color: blue; }
.green{ background-color: green; }
.yellow{ background-color: yellow; }
.purple{ background-color: purple; }

.home-height-single{ min-height: 50px; }
.home-height-double{ min-height: 100px; }

@media (min-width: 768px) {
    .b-col {
        float: right;
    }
}

标记:

<div class="row">
    <div class="col-sm-6 home-height-double green">
        <p>1</p>
    </div>
    <div class="col-sm-4 home-height-single blue b-col">
        <p>3</p>
    </div>
    <div class="col-sm-2 home-height-single purple b-col">
        <p>2</p>
    </div>
    <div class="col-sm-2 home-height-single green b-col">
        <p>7</p>
    </div>
    <div class="col-sm-4 home-height-double yellow b-col">
        <p>6</p>
    </div>
    <div class="col-sm-2 home-height-single blue">
        <p>4</p>
    </div>
    <div class="col-sm-4 home-height-single red">
        <p>5</p>
    </div>
    <div class="col-sm-2 home-height-single red b-col">
        <p>8</p>
    </div>
</div>

当前生成以下内容，其中 div 8 未填补空白:

JSFiddle - Showing the issue

我知道我可以创建 2 列并将 div 包装在 2 个父 div 中，但我想避免这种情况。原因是在移动 View 中，我想并排放置 div 2 和 4，而不是将它们堆叠在一起，如果将 div 包裹在 2 列中，我认为我无法做到这一点。

例如，我计划在解决此问题后将我的移动 View 设置为如下所示:

Answer 1

用 jQuery 做

$(function(){ 
    var el = $(".row div:last-child"); 
    el.css('top', el.height() * -1); 
    $( window ).resize(function() {
        if($( window ).width() < 768){
            el.css('top', 0); 
        }else{
            el.css('top', el.height() * -1); 
        };
    });
})

Fiddle

如果您能找到任何纯 css 解决方案，请告诉我。