Bootstrap ansprechende Spalten Reihenfolge basierend auf alphabetischer Inhalt

Question

Sagen wir, ich habe 4 Spalten wie dieser

 
A D G J 
B E H K 
C F I L 

Ich kann einfach nicht meinen Kopf um das Markup, das sie gebraucht zu lassen, wie dies fließen:

 
A G 
B H 
C I 
D J 
E K 
F L 

Statt

 
A D 
B E 
C F 
G J 
H K 
I L 

Alle diese Frage in Bezug auf Informationen würde geschätzt viel!

Answer 1

Sie können so etwas versuchen. Hinweis - Dies ist 2 Spalten bei weniger als 768px und 4 bei 768px und höher.

Demo here

<div class="row"> 
    <div class="col-xs-6"> 
     <div class="col-xs-12 col-sm-6"> 
      <div>A</div> 
      <div>B</div> 
      <div>C</div> 
     </div> 
     <div class="col-xs-12 col-sm-6"> 
      <div>D</div> 
      <div>E</div> 
      <div>F</div> 
     </div> 
    </div> 
    <div class="col-xs-6"> 
     <div class="col-xs-12 col-sm-6"> 
      <div>G</div> 
      <div>H</div> 
      <div>I</div> 
     </div> 
     <div class="col-xs-12 col-sm-6"> 
      <div>J</div> 
      <div>K</div> 
      <div>L</div> 
     </div> 
    </div> 
</div> 

Answer 2

Angenommen, Sie verwenden Bootstrap 3. ich die Wirkung erreicht haben, ich glaube, Sie sind nach dem durch Verschachtelung Spalten:

<div class="col-sm-6"> 
<div class="col-md-6">A <br/> B <br/> C</div> 
<div class="col-md-6">D <br/> E <br/> F</div> 
</div> 
<div class="col-sm-6"> 
    <div class="col-md-6">G <br/> H <br/> I</div> 
    <div class="col-md-3">J <br/> K <br/> L</div> 
</div> 

Demo

Answer 3

Sie sollten in der Lage sein, Tun Sie dies mit:

<div class="col-xs-6 col-md-3">A<br>B<br>C</div> 
<div class="col-xs-6 col-md-3 col-md-push-3">G<br>H<br>I</div> 
<div class="col-xs-6 col-md-3 col-md-pull-3">D<br>E<br>F</div> 
<div class="col-xs-6 col-md-3">J<br>K<br>L</div> 

Ich finde Design von der kleinsten Größe zuerst machen dies einfach.

bootply example