Estou tentando obter esse layout com uma série de divs lado a lado em uma única linha usando o Bootstrap 3.2.0, para telas> 768px Largo. As alturas de div são simples ou duplas, que nesta amostra eu configurei para50px e100px e div larguras são controladas por classecol-sm-x:

Minha melhor tentativa até agora usa a marcação e css abaixo:

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;
    }
}

Marcação:

<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>

Atualmente, isso produz o abaixo, onde div 8 não está preenchendo a lacuna:

Estou ciente de que poderia criar 2 colunas e agrupar as divs em 2 divs principais, mas quero evitar isso. O motivo é que, em uma visualização móvel, desejo colocar os divs 2 e 4 lado a lado, em vez de empilhá-los, o que não acredito que possa fazer se os divs estiverem agrupados em duas colunas.

Por exemplo, estou planejando configurar minha visualização para dispositivos móveis para algo parecido com este depois de resolver esse problema: