Wie wird dieses Bootstrap-Layout ohne Duplizierung von Inhalten durchgeführt?

Question

Ich versuche herauszufinden, wie man ein bestimmtes Bootstrap-Layout ohne Duplizierung von Inhalten erreichen kann. Grundsätzlich möchte ich etwas Inhalt in 2 Spalten an den Breakpoints und dann 3 Spalten für den Breakpoint sm/md gebrochen haben.

Für sm/md das Layout würde so aussehen:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     Item 1<br/> 
 
     Item 2<br/> 
 
     Item 3 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     Item 4<br/> 
 
     Item 5<br/> 
 
     Item 6 
 
    </div> 
 
    </div> 
 
</div>

Und dann auf dem lg Breakpoint ich es so aussehen wollen:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     Item 1<br/> 
 
     Item 2 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     Item 3<br/> 
 
     Item 4 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     Item 5<br/> 
 
     Item 6 
 
    </div> 
 
    </div> 
 
</div>

Jetzt weiß ich, dass ich diese Inhalte durch Duplizieren erreichen könnte und hidden/visible Klassen nur bestimmte Elemente an bestimmten Haltepunkten zu zeigen, aber ich frage mich, ob es möglich ist, dies zu tun, ohne Inhalt zu duplizieren.

Ich weiß auch, dass ich nur alle 3 Spalten auf col-lg-6 setzen könnte und die dritte Spalte würde direkt unter dem ersten fallen, aber ich hatte gehofft, die Elemente innerhalb der Spalten gleichmäßig verteilt, so dass sie die gleiche Höhe sind.

Answer 1

Mit Bootstrap können Sie mehrere col-*-* Breakpoints angeben. Eine einzelne Spalte könnte beispielsweise (col-sm-3 col-md-4 col-lg-6) haben, und Bootstrap wendet die entsprechende Größe basierend auf der Breite des Darstellungsbereichs an.

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 1</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 2</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 3</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 4</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 5</div> 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-4">Item 6</div> 
    </div> 
</div> 

So Bootstrap wir sagen, dass, wenn XS, SM, oder MD die Spaltenbreite ist 12.06 und wenn LG gültig sind:

Für Ihre Bedürfnisse, können Sie etwas entlang der Linien von verwenden gilt, wir verwenden eine Spaltenbreite von 4/12.