CODEWITHSUNDEEP
htmlcsstwitter-bootstraplayout
Mario Van den Eynde
Mario Van den Eynde

Reputation: 261

Bootstrap responsive columns order based on alphabetical content

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!

Upvotes: 7

Views: 3089

Answers (3)

Tricky12
Tricky12

Reputation: 6822

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>

Upvotes: 1

j08691
j08691

Reputation: 207901

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

Upvotes: 2

Zac
Zac

Reputation: 1072

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

Upvotes: 1

Related Questions