CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
GeorgeButter
GeorgeButter

Reputation: 2591

Sort bootstrap columns top to bottom instead of left to right

I am using a loop to call bootstrap columns:

<div class="col-xs-2">
Content
</div>

By default bootstrap sorts columns left to right:

[ 1 ] --> [ 2 ] --> [ 3 ]
[ 4 ] --> [ 5 ] --> [ 6 ]
[ 7 ] --> [ 8 ] --> [ 9 ]

With this particular loop though I would like to sort top to bottom:

[ 1 ]  [ 4 ]  [ 7 ]
  V      V      V
[ 2 ]  [ 5 ]  [ 8 ]
  V      V      V
[ 3 ]  [ 6 ]  [ 9 ]

How can I best achieve this whilst still using the regular bootstrap columns?

Upvotes: 5

Views: 2610

Answers (2)

ow3n
ow3n

Reputation: 6597

This is an old question but deserves an updated answer. Use media queries in Bootstrap combined with column-count to achieve this. See this Jsfiddle.

CSS

.threeTwoOneColumns {
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

@media (min-width: 576px) { 
  .threeTwoOneColumns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
@media (min-width: 768px) {
  .threeTwoOneColumns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
}

HTML

<div class="container-fluid mt-3">
  <div class="row">
    <div class="threeTwoOneColumns">
      <div class="c0">A</div>
      <div class="c1">B</div>
      <div class="c2">C</div>
      <div class="c3">D</div>
      <div class="c4">E</div>
      <div class="c5">F</div>
      <div class="c6">G</div>
      <div class="c7">H</div>
    </div>
  </div>
</div>

Upvotes: 2

Matthew Allen
Matthew Allen

Reputation: 821

One option you could do is have inner array items within each column. I think it will require more than just one loop though.

The markup structure will look like this:

<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <div class="array-item">1</div>
            <div class="array-item">2</div>
            <div class="array-item">3</div>
        </div>
        <div class="col-xs-4">
            <div class="array-item">4</div>
            <div class="array-item">5</div>
            <div class="array-item">6</div>
        </div>
        <div class="col-xs-4">
            <div class="array-item">7</div>
            <div class="array-item">8</div>
            <div class="array-item">9</div>
        </div>        
    </div>
</div>

Fiddle here. Obviously, it's not an issue as divs are block elements but if you wanted to use something else, make sure it has display: block; on it.

You haven't tagged whether you're using PHP or .NET or anything but my example loops below are using C#.

<div class="container">
    <div class="row">   
        <div class="col-xs-4">
        @for (var i = 0; i < 3; i++) {
            <div class="array-item">array[i]</div>               
        }
        </div>
        <div class="col-xs-4">
        @for (var i = 3; i < 6; i++) {
            <div class="array-item">array[i]</div>               
        }
        </div>
        <div class="col-xs-4">
        @for (var i = 6; i < 9; i++) {
            <div class="array-item">array[i]</div>            
        }
        </div>        
    </div>
</div>

Doing it like that will let you control how many items within each column you want. It's a bit messier than just having one loop but it should do the trick.

Upvotes: 3

Related Questions