Estoy tratando de lograr este diseño con una serie de divisiones en mosaico en una sola fila usando Bootstrap 3.2.0, para pantallas> 768px amplio. Las alturas div son simples o dobles, que en esta muestra he establecido en50px y100px y los anchos div están controlados por clasecol-sm-x:

Mi mejor intento hasta ahora utiliza el siguiente marcado y 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;
    }
}

Margen:

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

Actualmente, esto produce lo siguiente, donde div 8 no está llenando el vacío:

Soy consciente de que podría crear 2 columnas y envolver los divs en 2 divs principales, pero quiero evitar esto. La razón es que en una vista móvil, quiero colocar los divs 2 y 4 uno al lado del otro, en lugar de tenerlos apilados, lo que no creo que pueda hacer si los divs están envueltos en 2 columnas.

Por ejemplo, estoy planeando configurar mi vista móvil para que se vea así una vez que haya superado este problema: