Я пытаюсь добиться этого макета с помощью серии плиточных div в одной строке, используя Bootstrap 3.2.0 для экранов> 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 не заполняет пробел:

Я знаю, что могу создать 2 столбца и обернуть элементы в 2 родительских элемента, но я хочу этого избежать. Причина в том, что в мобильном представлении я хочу размещать элементы div 2 и 4 рядом друг с другом, а не размещать их друг над другом, что я не думаю, что смогу сделать, если элементы div будут заключены в 2 столбца.

Например, я планирую настроить мой мобильный вид, чтобы он выглядел примерно так, как только я обошёл эту проблему: