Complex CSS layout with Bootstrap

Review:

Using multiple grid class for different column arrangement in different viewports

Unless you are using the classes col- all columns collapse in small viewport (under 576px). To still have column-based layout in small viewports use multiple grid classes. For example the following code creates 6 columns in viewports bigger than or equal to 576px and 3 columns in viewport sizes smaller than 576px.

    <div class="col-4 col-sm-2">......</div>
    <div class="col-4 col-sm-2">......</div>
    <div class="col-4 col-sm-2">......</div>
    <div class="col-4 col-sm-2">......</div>
    <div class="col-4 col-sm-2">......</div>
    <div class="col-4 col-sm-2">......</div>

Nesting columns

The following code shows how to create a layout similar to the image below. The nested grid is inside one of the columns. Full code is here.

nested-grid

    <div class="container">
      <div class="row">
        <div class="col-sm-8">
        <!-- *******   nested columns ******* -->
          <div class="row">
            <div class="col-sm-12">....</div>
          </div> <!-- .row --> 
          <div class="row"> 
            <div class="col-sm-4">....</div> 
            <div class="col-sm-4"> </div>
            <div class="col-sm-4"> </div>  
          </div><!-- .row --> 
        </div> <!-- .col-sm-8 --> 	
        <div class="col-sm-4">....</div> 
      </div> <!-- .row --> 
    </div> <!-- .container -->