title: Bootstrap grid not working for the small screen wide < 768px
body: <p>I am using bootstrap to achieve responsiveness in different device landscapes.
  But when I test this on a mobile phone, the columns are not appearing properly.  First two columns are fine, but the third column should start on the right hand side but it is pushed to the left.
  <img src="https://i.stack.imgur.com/vLW1h.png" alt="enter image description here"></p>
  
  <p>The html is as follows,</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  
      &lt;!--required style sheets--&gt;
      &lt;link href="../../styles/bootstrap.min.css" type="text/css" rel="stylesheet"&gt;    
      &lt;link href="../../styles/styles.css" type="text/css" rel="stylesheet"&gt;
      &lt;title&gt;Test&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;   
  
      &lt;div class="container row"&gt;
          &lt;div class="col-sm-3"&gt;        
          &lt;/div&gt;&lt;!--/end left column--&gt;
          &lt;div class="col-sm-9"&gt;
              &lt;div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-xs-12 col-sm-12"&gt;
  
                          &lt;div class="row"&gt;
                              &lt;label class="col-xs-6 col-sm-3"&gt;Reg No:&lt;/label&gt;
                              &lt;div class="col-xs-6 col-sm-3 COES-value"&gt;21038&lt;/div&gt;
                              &lt;label class="col-xs-6 col-sm-3"&gt;Telephone no:&lt;/label&gt;
                              &lt;div class="col-xs-6 col-sm-3 COES-value"&gt;9758 9762&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;              
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  
      &lt;!--javascript libraries--&gt;
      &lt;script src="../../js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="../../js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The CSS is as follows,</p>
  
  <pre><code> /* Media queries - small #################################################      */
  
  @media screen and (max-width: 768px) {      
  
  
         .COES-value{
             font-size: 10px;
             font-family: Arial;
             font-weight: bold;
         }   
  
  }
  
  
   /* Media queries - large #################################################      */
  
  @media screen and (min-width: 768px) {  
  
         .COES-value{
             font-size: 12px;
             font-family: Arial;
             font-weight: bold;
         }
  }
  </code></pre>