响应式布局＆amp;列浮动问题

Question

我正在尝试使用Bootstrap 3.2.0在一行中使用一系列平铺div实现此布局，用于屏幕> 768px宽。 div高度为单高或双高，在此示例中我设置为50px和100px，div宽度由类col-sm-x控制：

到目前为止，我最好的尝试使用了以下标记＆amp;的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中，但我想避免这种情况。原因是在移动视图中，我想放置div 2＆amp; 4并排，而不是堆叠，如果div被包裹在2列中，我不相信我能做到。

例如，我计划在我遇到此问题后设置我的移动视图看起来像这样：

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的解决方案，请告诉我。

Answer 2

我设法通过以下编辑来修复布局问题到我的CSS媒体查询：

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

    .b-col:last-of-type {
        position: absolute;
        bottom: 0;
        right: 0
    }
}

Working JSFiddle

Answer 3

向＃8添加负上边距，它会弹出（-50px）。

http://jsfiddle.net/72vjc/1/

<div style="padding: 30px; color: #ccc;">
<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" style="margin-top:-50px">
        <p>8</p>
    </div>
</div>

我所做的是用另一个宽度（我做col-sm-1）来看它，这使得它更窄，但没有移动它。这就是为什么它对我而言似乎是一个保证金问题。