Ich versuche, dieses Layout mit einer Reihe von gekachelten Divs in einer einzigen Zeile mit Bootstrap 3.2.0 für Bildschirme zu erreichen> 768px breit. Die Div-Höhen sind entweder einfach oder doppelt, was ich in diesem Beispiel festgelegt habe50px und100px und div Breiten werden von der Klasse gesteuertcol-sm-x:

Mein bisher bester Versuch verwendet das folgende Markup & 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;
    }
}

Markup:

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

Dies erzeugt derzeit das Folgende, wobei Div 8 die Lücke nicht füllt:

Mir ist bewusst, dass ich 2 Spalten erstellen und die divs in 2 übergeordnete divs einschließen könnte, aber ich möchte dies vermeiden. Der Grund dafür ist, dass ich in einer mobilen Ansicht die Divs 2 und 4 nebeneinander platzieren möchte, anstatt sie zu stapeln. Ich glaube nicht, dass ich das tun kann, wenn die Divs in zwei Spalten eingeschlossen sind.

Zum Beispiel plane ich, meine mobile Ansicht so einzurichten, dass sie ungefähr so aussieht, sobald ich dieses Problem überwunden habe: