Bootstrap :Grid not working in mobile view

Question

The following is my grid structure for a site using bootstrap 3. It looks good in the desktop version but when I resize my window it does not go to mobile/tab view. Whats wrong here? On desktop I want them to take 1/6 of the row, and on mobile, 1/3.

<div class="row" id="features">
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->

  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->

  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <div class="panel odd">
      <img src="images/treatment.png" alt="Treatments">
      <span>Treatments</span>
    </div>
  </div> <!--panel-->
</div><!--row-->

Answer 1

Please check if you have included meta tags in your html head section

<meta name="viewport" content="width=device-width, initial-scale=1">