Let's assume that we are building a simple responsive website and we need a three-column layout for our template. Here's what your markup should look like:

<div class="container"> 
   <div class="row"> 
      <div class="col-md-4"> 
         <!-- column 1 //--> 
      </div> 
      <div class="col-md-4"> 
         <!-- column 2 //--> 
      </div> 
      <div class="col-md-4"> 
         <!-- column 3 //--> 
      </div> 
   </div> 
</div> 

As you can see, I've inserted three <div>s inside my row <div>, each with a class of .col-md-4. For devices that have a resolution of 768 pixels or greater, you'll see a three-column layout like this:

Now, if you were to view this same layout on a device with resolution smaller than 768 pixels, each column's width would change to 100% and the columns would be stacked on top of each other. That variation of the layout for smaller screens would look like this:

That's all well and good, but what if we wanted to have a different layout for the columns on smaller devices that didn't set them all to 100% width? That can be done by mixing column classes.