CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
CaribouCode
CaribouCode

Reputation: 14398

Bootstrap go from 3 columns to 2 whilst preserving rows

I have a layout for desktop of 3 columns and 2 rows like so:

<div class="row">
  <div class="col-md-4">
    1. Lorem ipsum
  </div>
  <div class="col-md-4">
    2. dolor sit<br>amet
  </div>
  <div class="col-md-4">
    3. consectetur
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    4. adipisicing<br>incididunt
  </div>
  <div class="col-md-4">
    5. elit
  </div>
  <div class="col-md-4">
    6. sed reprehenderit
  </div>
</div>

On mobile I want to achieve a layout of 2 columns and 3 rows that would look like this:

<div class="row">
  <div class="col-xs-6">
    1. Lorem ipsum
  </div>
  <div class="col-xs-6">
    2. dolor sit<br>amet
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    3. consectetur
  </div>
  <div class="col-xs-6">
    4. adipisicing<br>incididunt
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    5. elit
  </div>
  <div class="col-xs-6">
    6. sed reprehenderit
  </div>
</div>

So my current solution is to only have a single wrapping row and allow Bootstrap to do it's natural wrapping like so:

<div class="row">
  <div class="col-xs-6 col-md-4">
    1. Lorem ipsum
  </div>
  <div class="col-xs-6 col-md-4">
    2. dolor sit<br>amet
  </div>
  <div class="col-xs-6 col-md-4">
    3. consectetur
  </div>
  <div class="col-xs-6 col-md-4">
    4. adipisicing<br>incididunt
  </div>
  <div class="col-xs-6 col-md-4">
    5. elit
  </div>
  <div class="col-xs-6 col-md-4">
    6. sed reprehenderit
  </div>
</div>

Works fine except when the columns aren't all the same height (which they aren't). In these situation the layout breaks where the floats get caught against an element.

Here's a Plunker example of the problem: https://embed.plnkr.co/eUJCUiGl5VrnTc5Z1c72/

What is the solution in this scenario?

Upvotes: 1

Views: 43

Answers (1)

Tim Lewis
Tim Lewis

Reputation: 29278

You're close, and you've got the right idea using a single wrapping <div class="row"> element. All you need are clearfix elements, visible at certain breakpoint values (xs, sm, md, lg):

<div class="row">
    <div class="col-md-4 col-xs-6">
        <div class="body">
            1. Multi<br>line<br>content
        </div>
    </div>
    <div class="col-md-4 col-xs-6">
        <div class="body">
            2. Single line
        </div>
    </div>
    <div class="clearfix visible-xs-block visible-sm-block"></div>
    <div class="col-md-4 col-xs-6">
        <div class="body">
            3. Double<br>line
        </div>
    </div>
    <div class="clearfix visible-md-block visible-lg-block"></div>
    <div class="col-md-4 col-xs-6">
        <div class="body">
            4. More content
        </div>
    </div>
    <div class="clearfix visible-xs-block visible-sm-block"></div>
    <div class="col-md-4 col-xs-6">
        <div class="body">
            5. Body
        </div>
    </div>
    <div class="col-md-4 col-xs-6">
        <div class="body">
            6. Text<br>with<br>many<br>many<br>lines
        </div>
    </div>
    <div class="clearfix"></div>
</div>

What this does is forces a new row at given intervals - xs/sm every other <div> and md/lg every third <div> (which can easily be inserted programatically using a loop). By specifying the visible-*-block class, it will only render the <div> at certain breakpoints, meaning you won't get accidental spaces.

You can find more documentation Here and a live example Here

Example of a Loop to generate this (PHP, but can be done with any language):

for($i = 1; $i < 13; $i++){
  echo '<div>'.$i.' Words... Blah... Whatever.</div>';
  if($i % 6 == 0){
    echo '<div class="clearfix"></div>';
  } else if($i % 3 == 0){
    echo '<div class="clearfix visible-md-block visible-lg-block"></div>';
  } else if($i % 2 == 0){
    echo '<div class="clearfix visible-xs-block visible-sm-block">
  }
}

So what this will do is every 2nd iteration print a clearfix for xs/sm, every 3rd iteration print a clearfix for md/lg and every 6th iteration print a clearix for both.

Upvotes: 2

Related Questions