Bootstrap 3 Grid System

Bootstrap's grid system allows up to 12 columns across the page, you can create the page layout on the basics of these 12 columns. Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

The Grid classes can be combined to create more dynamic and flexible layouts. The Bootstrap grid system has four classes:
xs (for Extra Small Devices eg. phones < 768px )
sm (for small devices eg. tablets >= 768px )
md (for medium devices eg. desktops >= 992px )
lg (for larger devices eg. larger desktops >= 1200px )

Example 1: Create a layout of three equal columns

Same way you can create layout of 2 columns

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

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

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