Bootstrap responsive columns order based on alphabetical content

Question

Let's say I have 4 columns like this

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

I just can't get my head around the markup that's needed to let it flow like this:

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

Instead of

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

Any information regarding this issue would be much appreciated!

Answer 1

You should be able to 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 designing from the smallest size first make this easy.

bootply example

Answer 2

Assuming you are using bootstrap 3. I have achieved the effect I think you are after by nesting 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

Answer 3

You can try something like this. Note - this is 2 columns at less than 768px and 4 at 768px and up.

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>