Bootstrap-responsive column order based on alphabetical content

Question

Let's say I have 4 columns like

  ADGJ
 BEHK
 CFIL

I just can't wave the markup, which should allow it to flow like this:

  AG
 Bh
 Ci
 DJ
 Ek
 Fl

Instead

  AD
 BE
 CF
 Gj
 Hk
 IL

Any information regarding this issue would be greatly appreciated!

Answer 1

You can do this with:

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

I find that designing with the smallest size makes this easier.

boot example

Answer 2

You can try something like this. Note. These are 2 columns with a resolution of less than 768 pixels and 4 by 768 pixels and higher.

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 3

Assuming you are using bootstrap 3. I achieved the effect that I think you need, nested columns:

 <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