Verwenden von Bootstrap, um dieses Layout zu erstellen

Question

Ich bin in der Lage, es etwas annähern mit Spalten, aber die Zeilen nicht ausgerichtet und sie kollabieren in einer diagonalen Weise. Also dachte ich, ich würde einfach neu anfangen und um Hilfe bitten, um eine reaktionsfähige Version davon zu machen. Wenn der Bildschirm schrumpft, sollte jede Einheit übereinander gestapelt werden.

Hier ist, was ich versuche zu erstellen:

Und hier ist mein Ausgangspunkt.

HTML:

<div class="unit"> 
    <div id="blue" class="square"></div> 
    <div class="text">Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text  Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum 
    </div> 
</div> 

<div class="unit"> 
    <div id="red" class="square"></div> 
    <div class="text"> 
    Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text  Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum 
    </div> 
</div> 

<div class="unit"> 
    <div id="yellow" class="square"></div> 
    <div class="text"> 
Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum  Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum Yellow Text Lorem Ipsum </div> 
</div> 

<div class="unit"> 
    <div id="green" class="square"></div> 
    <div class="text">Green Text Lorem Ipsum Green Text Lorem Ipsum Green Text  Lorem Ipsum Green Text Lorem Ipsum Green Text Lorem Ipsum Green Text Lorem Ipsum  Green Text Lorem Ipsum</div> 
</div> 

CSS (kein Layout)

.square{ 
    height: 50px; 
    width: 50px; 
} 

#blue{ 
    background-color: blue; 
} 

#red{ 
    background-color: red; 
} 

#yellow{ 
    background-color: yellow; 
} 

#green{ 
    background-color: green; 
} 

Answer 1

verwenden, um die Bootstrap-gridsystem

<div class="container"> 
<div class="row"> 
    <div class="unit col-md-6"> 
     <div id="blue" class="square col-md-6"></div> 
     <div class="text col-md-6">Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text  Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum Blue text Lorem Ipsum 
     </div> 
    </div> 

    <div class="unit col-md-6"> 
     <div id="red" class="square col-md-6"></div> 
     <div class="text col-md-6"> 
     Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum Red Text  Lorem Ipsum Red Text Lorem Ipsum Red Text Lorem Ipsum 
     </div> 
    </div> 
</div> 
</div> 

und wiederholen Sie die Zeile für die anderen Reihen .....

Answer 2

Mit Bootstrap würden Sie sich auf das Grid-System verlassen. Im folgenden Beispiel habe ich .container-fluid und .col-xs-6 verwendet, um ein Raster mit einem zweispaltigen Format unabhängig von der Bildschirmgröße zu erstellen.

.unit { 
 
    text-transform: uppercase; 
 
} 
 

 
.square { 
 
    float: left; 
 
    width: 150px; 
 
    height: 150px; 
 
    background: #ccc; 
 
    margin: 0 15px 5px 0; 
 
} 
 

 
.red { 
 
    background: #ff0000; 
 
} 
 

 
.yellow { 
 
    background: #ffff00; 
 
} 
 

 
.green { 
 
    background: #00ff00; 
 
} 
 

 
.blue { 
 
    background: #0000ff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
\t <div class="row"> 
 
\t 
 
\t \t <div class="col-xs-6"> 
 
\t \t \t <div class="unit"> 
 
\t \t \t \t <div class="square blue"></div> 
 
\t \t \t \t <div class="text"> 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="col-xs-6"> 
 
\t \t \t <div class="unit"> 
 
\t \t \t \t <div class="square red"></div> 
 
\t \t \t \t <div class="text"> 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="col-xs-6"> 
 
\t \t \t <div class="unit"> 
 
\t \t \t \t <div class="square yellow"></div> 
 
\t \t \t \t <div class="text"> 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="col-xs-6"> 
 
\t \t \t <div class="unit"> 
 
\t \t \t \t <div class="square green"></div> 
 
\t \t \t \t <div class="text"> 
 
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> \t \t \t \t 
 
\t \t 
 
\t </div> 
 
</div>