title: bootstrap grid system does not work on all devices size
body: <p>I am facing a very strange issue with bootstrap. As far as I know bootstrap grid system is based on 12 units and works with any device size such as i-phone... 
  I have a very simple banner which consists of 5 columns as follows:</p>
  
  <p>col-xs-1  |  col-xs-1  |  col-xs-8  |col-xs-1| <strong><em>col-xs-1</em></strong></p>
  
  <p>So I expect that all of the above columns fit into the row since in total they are 12. As you can see in the fiddle I provided when I use chrome emulator and put it on something like iphone 5 the last column goes to the next row and it does not fit the row.</p>
  
  <p><a href="http://www.w3schools.com/code/tryit.asp?filename=FB7U2AVWZ5MX" rel="nofollow noreferrer">code(I used w3school editor since when I use jsfiddle and code pen to add meta tag they do not apply it and the editor in w3school was the only one could replicate my problem </a></p>
  
  <p>For more explanation this only happens when I add the following meta tag into my page:</p>
  
  <pre><code>&lt;meta name="viewport"
  content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;
  </code></pre>
  
  <p></p>
  
  <p>Now it is a big issue for me and I am stuck since this is a base of my layout and I want to make sure the base is set up correctly. Can anyone help?</p>
  
  <pre><code>*********************MY CODE*****************************
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-     scale=1.0, minimum-scale=1.0"&gt;
     &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
     &lt;link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  integrity="sha384-   BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous"&gt;
  
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-    theme.min.css"
  integrity="sha384-  rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
  crossorigin="anonymous"&gt;
  
  &lt;script
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;        &lt;/script&gt;
  &lt;!-- Latest compiled and minified JavaScript --&gt;
   &lt;script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
  integrity="sha384-  Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
  crossorigin="anonymous"&gt;&lt;/script&gt;
  
     &lt;style&gt;
     /*----------------------HEADER ---------------------------------------------------------  */
   .header {
  font-weight: bold;
  background-color: #4070CB;
  color: #EFF0F2;
  height: 100px;
  padding-top: 15px;
  }
  
  .col {
  padding: 0 0 0 0;
  }
  
  .header a {
  color: white;
  font-size: 5vw;
  }
  
  .txt-align-right {
     text-align: right;
  }
  
  .txt-align-left {
    text-align: left;
   }
  
  .txt {
    align-items: center;
      display: flex;
    text-align: center;
    justify-content: center;
  }
  
  .font-size-xs {
     font-size: 4vw;
   }
   &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
  &lt;div id="mainContainer" class="container-fluid"&gt;
      &lt;!-- Header --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12 header"&gt;
              &lt;div class="col-xs-1"&gt;&lt;/div&gt;
              &lt;div class="col-xs-2 txt-align-left"&gt;
                  &lt;a href="#" id="menuClick"&gt; &lt;span
                      class="glyphicon glyphicon-align-justify"&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-6 txt font-size-xs"&gt;TTTTTT-TTTTT&lt;/div&gt;
              &lt;div class="col-xs-2 txt-align-right"&gt;
                  &lt;a href="#"&gt; &lt;span class="glyphicon glyphicon-phone"&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-1"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
     &lt;/html&gt;
  </code></pre>