Bootstrap 3.0 : Grid System Implementation

Question

i am using Bootstrap 3.0 in my project (for first time ). now what i want is to have 6 boxes in a row for 1024px width but when page is viewed in tabs it should go to 3 boxes per line . using following code i have six boxes for large screens but for ipads / tabs it does not go to 3 boxes per lines . Please see code and suggest me the way to fix it .

<div class="container">             
 <div class="row" id="features">
  <div class="col-sm-2  col-sm-4  ">
  <div class="panel">
     <span>Panel content </span>                         
  </div><!-- end panel -->
  </div><!-- end col-sm-2-->

  <div class="col-sm-2  col-sm-4  ">
  <div class="panel">
     <span>Panel content </span>                         
  </div><!-- end panel -->
  </div><!-- end col-sm-2-->

  and six boxes like this 
</div >
</div >
</div>

Answer 1

Bootstrap already brings responsive design, but only to 768px (Ipad width). You can use this bootstrap functionality with their column system:

.col-xs-* to <768px .col-sm-* to ≥768px .col-md-* to ≥992px and .col-lg-* to ≥1200px

there is more info in the web: http://getbootstrap.com/css/

If you want responsive design below 768 you will need to do it yourself by using:

@media (min-width: 600px, max-width: 768px) for example.