Bootstrap 3.0 grids - how to transpose them in vertical?

Question

I'm using Bootstrap grids, and was searching for a fast / non-invasive way for showing in vertical some elements using a grid.

For example, if usually I'd obtain (ie using col-md-3):

A B C D 
E F G H
I L M N
O P Q R

in my version I would have "transposed" version:

A E I O
B F L P
C G M Q
D H N R

IS that just server-side problem, or there is a way for doing that with grids CSS and/or javascript?

S

Answer 1

In your original example it looks like you are opening a ul tag and then giving each li a class of col-md-3 .

What you could do to achieve the desired result is open up 4 ul tags instead (one for each column) and give each a class of col-md-3 . Then the li tags inside these ul tags will not need any class on them.

Here is what that code would look like:

<ul class="col-md-3">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

<ul class="col-md-3">
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
</ul>

<ul class="col-md-3">
    <li>I</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
</ul>

<ul class="col-md-3">
    <li>O</li>
    <li>P</li>
    <li>Q</li>
    <li>R</li>
</ul>

This may not be exactly how you were looking to accomplish this, but this will achieve the desired result. I hope this helps!