BOOSTRAP Grid | 4 columns > 2 columns > 1 columns

Question

I'm struggling with a 'simple' task with the bootstrap grid layout. I would like 4 columns on large viewport, then 2 columns on medium to finish with only 1 column on smaller devices.

When I'm testing my code snippet, It appears that I have a layout problem with viewport bewteen 992px -> 1199px wide.

The title 3 is not aligned properly.

Here is the codepen link: http://codepen.io/ocleyman/pen/raXbxE

Here is the html snippet:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-lg-3" style="background:pink;">
      <h3>TITLE 1</h3>
      <p>Lorem ipsum dolor sit amet, et assum efficiantur his, tota postea moderatius ei eos. Eam quis percipitur sadipscing cu. Sale liberavisse ius te, laudem disputando has no. Eos platonem assentior ut, ea iudicabit gubergren evertitur ius, eum nobis definitionem ea. Vix eu quot quaerendum efficiantur.</p>
</div>
<div class="col-md-6 col-lg-3" style="background:red;">
    <h3>TITLE 2</h3>
    <p>Et inermis copiosae cum. Illum delectus voluptaria his ne. Habeo saepe tantas sed no. Ei duo solum pertinax. Ludus aliquid honestatis et pri. Est habeo singulis hendrerit cu, graeco scriptorem theophrastus est ne. Mea audire interpretaris an.</p>
</div>
<div class="col-md-6 col-lg-3"  style="background:yellow;">
    <h3>TITLE 3</h3>
    <p>Odio denique conclusionemque eum et. Pro quodsi expetendis adipiscing ad, vim posse nominati id. Et laboramus assentior quo. Idque dicant verear pri te, vim ad simul dolores, iusto constituto per eu.</p>
</div>
<div class="col-md-6 col-lg-3" style="background:green;">
    <h3>TITLE 4</h3>
    <p>Mei menandri definiebas ad, aeque omnes posidonium ut ius, ut modo justo intellegebat mel. Hinc lucilius detraxit eos at. Hinc inimicus volutpat at his. Ius ornatus convenire honestatis at, ei wisi ceteros pro. Timeam aliquam mea no, ad autem semper vis. An invenire voluptaria eam.</p>
</div>

Any suggestions?

Answer 1

I think you need to use nested rows:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="row">
                <div class="col-md-6" style="background:pink;">
                    <h3>TITLE 1</h3>
                    <p>Lorem ipsum dolor sit amet, et assum efficiantur his, tota postea moderatius ei eos. Eam quis percipitur sadipscing cu. Sale liberavisse ius te, laudem disputando has no. Eos platonem assentior ut, ea iudicabit gubergren evertitur ius, eum nobis definitionem ea. Vix eu quot quaerendum efficiantur.</p>
                </div>
                <div class="col-md-6" style="background:red;">
                    <h3>TITLE 2</h3>
                    <p>Et inermis copiosae cum. Illum delectus voluptaria his ne. Habeo saepe tantas sed no. Ei duo solum pertinax. Ludus aliquid honestatis et pri. Est habeo singulis hendrerit cu, graeco scriptorem theophrastus est ne. Mea audire interpretaris an.</p>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="row">
                <div class="col-md-6"  style="background:yellow;">
                    <h3>TITLE 3</h3>
                    <p>Odio denique conclusionemque eum et. Pro quodsi expetendis adipiscing ad, vim posse nominati id. Et laboramus assentior quo. Idque dicant verear pri te, vim ad simul dolores, iusto constituto per eu.</p>
                </div>
                <div class="col-md-6" style="background:green;">
                    <h3>TITLE 4</h3>
                    <p>Mei menandri definiebas ad, aeque omnes posidonium ut ius, ut modo justo intellegebat mel. Hinc lucilius detraxit eos at. Hinc inimicus volutpat at his. Ius ornatus convenire honestatis at, ei wisi ceteros pro. Timeam aliquam mea no, ad autem semper vis. An invenire voluptaria eam.</p>
                </div>
            </div>
        </div>
    </div>
</div>

http://codepen.io/anon/pen/qEewPa

Answer 2

It is because the boxes are different heights. When the boxes are floated they will take up the available space.

Setting them all to the same height will allow the boxes to align correctly (see below).