title: Bootstrap 3 col-xs and col-md Is not Responding
body: <p>I am having issues with my Col-xs and my col-md.</p>
  
  <p>So before I continue ill explain my use.
  Im Trying to create a user Form where they can enter their details and then enter a quantity for a piece of furniture. The furniture section is within a Tab-Content as there are separate sections within a house.</p>
  
  <p>So id like for col-xs to span 2 columns, a column for label and one for the Quantity input, And then ill slowly increase by 2 columns, so sm will display, label, quantity, label quantity, and so on.</p>
  
  <p>The col-sm and col-lg work Perfectly, but the col-xs and the col-md are not working, Its almost as if they are being skiped. Please help.</p>
  
  <p>This is my code... </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="container"&gt;                   
                          
                              &lt;h3&gt;Houseold Inventory&lt;/h3&gt;
  
                              &lt;div class="tabbable"&gt;
                                  &lt;ul class="nav nav-tabs"&gt;
                                      &lt;li class="active"&gt;&lt;a href="#lounge" data-toggle="tab"&gt;Lounge&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#dinning" data-toggle="tab"&gt;Dinning Room&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#householdKitchen" data-toggle="tab"&gt;Kitchen&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#bed" data-toggle="tab"&gt;Bed Room&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#study" data-toggle="tab"&gt;Study&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#householdGarden" data-toggle="tab"&gt;Garden&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#domestic" data-toggle="tab"&gt;Domestic&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#householdGarage" data-toggle="tab"&gt;Garage&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#householdGym" data-toggle="tab"&gt;Gym Equipment&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#householdMisc" data-toggle="tab"&gt;Miscellaneous&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#householdBoxes" data-toggle="tab"&gt;Boxes&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#householdExtra" data-toggle="tab"&gt;Extras&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt; &lt;!-- nav-tabs END--&gt;
  
                                  &lt;div class="tab-content"&gt;
                                      &lt;div class="tab-pane active" id="lounge"&gt;
                                          &lt;h4&gt;Lounge&lt;/h4&gt;
  
                                          &lt;form role="form" class="form-inline"&gt;
  
                                              &lt;div class="row"&gt;
                                                  &lt;div class="form-group"&gt;
               &lt;div class="col-xs-6 col-sm-4 col-md-2"&gt;&lt;label&gt;Sleeper couch&lt;/label&gt;&lt;/div&gt;
               &lt;div class="col-xs-6 col-sm-2 col-md-2"&gt;
                &lt;input type="text" class="form-control" placeholder="QTY" style="width:60px;" /&gt;
               &lt;/div&gt;
              &lt;div&gt;
              &lt;div class="form-group"&gt;
               &lt;div class="col-xs-6 col-sm-4 col-md-2"&gt;&lt;label&gt;Sleeper couch&lt;/label&gt;&lt;/div&gt;
               &lt;div class="col-xs-6 col-sm-2 col-md-2"&gt;
                &lt;input type="text" class="form-control" placeholder="QTY" style="width:60px;" /&gt;
               &lt;/div&gt;
              &lt;div&gt;
              &lt;div class="form-group"&gt;
               &lt;div class="col-xs-6 col-sm-4 col-md-2"&gt;&lt;label&gt;Sleeper couch&lt;/label&gt;&lt;/div&gt;
               &lt;div class="col-xs-6 col-sm-2 col-md-2"&gt;
                &lt;input type="text" class="form-control" placeholder="QTY" style="width:60px;" /&gt;
               &lt;/div&gt;
              &lt;div&gt;
              &lt;div class="form-group"&gt;
               &lt;div class="col-xs-6 col-sm-4 col-md-2"&gt;&lt;label&gt;Sleeper couch&lt;/label&gt;&lt;/div&gt;
               &lt;div class="col-xs-6 col-sm-2 col-md-2"&gt;
                &lt;input type="text" class="form-control" placeholder="QTY" style="width:60px;" /&gt;
               &lt;/div&gt;
              &lt;div&gt;
              &lt;div class="form-group"&gt;
               &lt;div class="col-xs-6 col-sm-4 col-md-2"&gt;&lt;label&gt;Sleeper couch&lt;/label&gt;&lt;/div&gt;
               &lt;div class="col-xs-6 col-sm-2 col-md-2"&gt;
                &lt;input type="text" class="form-control" placeholder="QTY" style="width:60px;" /&gt;
               &lt;/div&gt;
              &lt;div&gt;
              &lt;div class="form-group"&gt;
               &lt;div class="col-xs-6 col-sm-4 col-md-2"&gt;&lt;label&gt;Sleeper couch&lt;/label&gt;&lt;/div&gt;
               &lt;div class="col-xs-6 col-sm-2 col-md-2"&gt;
                &lt;input type="text" class="form-control" placeholder="QTY" style="width:60px;" /&gt;
               &lt;/div&gt;
              &lt;div&gt;
              &lt;div class="form-group"&gt;
               &lt;div class="col-xs-6 col-sm-4 col-md-2"&gt;&lt;label&gt;Sleeper couch&lt;/label&gt;&lt;/div&gt;
               &lt;div class="col-xs-6 col-sm-2 col-md-2"&gt;
                &lt;input type="text" class="form-control" placeholder="QTY" style="width:60px;" /&gt;
               &lt;/div&gt;
              &lt;div&gt;
              
                                              &lt;/div&gt;&lt;!--end row--&gt;
                                          &lt;/form&gt;
                                      &lt;div&gt;
                                  &lt;/div&gt; &lt;!--tab-content end--&gt;
                              &lt;/div&gt; &lt;!--tabbable end--&gt;
                          &lt;!-- col-sm-6 END--&gt;
                      
                  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am very new to Bootstrap and Web layout, but criticism is welcome.</p>
  
  <p>ps. Please Excuse the Layout issues i cannot figure out why the Code insert is doing this</p>
  
  <p>pps. Check this Similer question For layout example :  <a href="https://stackoverflow.com/questions/23469251/col-xs-not-working-when-mobile-is-orienting-between-horizontal-vertical-view-i">Unanswered Question</a></p>
  
  <p>ppss. Here is an image of my Mobile issue....
  <img src="https://i.stack.imgur.com/KJJKy.jpg" alt="enter image description here"> </p>