Bootstrap colonne reattive ordine basato sui contenuti alfabetico

Question

Diciamo che ho 4 colonne come questo

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

non riesco proprio a ottenere la mia testa tutto il markup che serve per far scorrere in questo modo:

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

Invece di

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

Tutte le informazioni riguardo a questo problema sarebbe molto apprezzato!

Answer 1

Puoi provare qualcosa di simile. Nota: si tratta di 2 colonne inferiori a 768px e 4 a 768px e superiori.

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

Supponendo che si sta utilizzando bootstrap 3. Ho ottenuto l'effetto Penso che tu sia dopo da colonne nidificano:

<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

Si dovrebbe essere in grado di fai questo con:

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

Trovo che progettare dalle dimensioni più ridotte faciliti l'operazione.

bootply example