title: Bootstrap3 form does not keep it layout on mobile
body: <p>I have crated a form containing a date line (day, month, year) and a line below with time (hour : minutes). The fields are text inputs because they should rarely be changed but just accepted and submit the form.</p>
  
  <p>The layout looks like I want to have it, both on PC and tablets - but when using a mobile it puts all 5 input fields on a seperate line and in full width. Even when there is enough space on the mobile.</p>
  
  <p><a href="http://codepen.io/anon/pen/bEJxYE" rel="nofollow">Copy of my html</a></p>
  
  <p>The snipplet below, inline shows it as it looks on mobile and as PC when in fullscreen. I would like it to look as on PC on mobile also.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
   &lt;div class="container"&gt;
   &lt;form class="form-horizontal" id="flexinform" action="usr_flexin.php" method="post"&gt;
    &lt;div class="form-group form-inline"&gt;
     &lt;label class="control-label col-xs-2"&gt;Dato&lt;/label&gt;
     &lt;input class="form-control" type="text" name="day" size="2" maxlength="2" value="17" onkeypress="return trapenter(month,event);" onchange="alertonchanges();" /&gt;
     &lt;input class="form-control" type="text" name="month" size="2" maxlength="2" value="02" onkeypress="return trapenter(year,event);" onchange="alertonchanges();" /&gt;
     &lt;input class="form-control" type="text" name="year" size="4" maxlength="4" value="2016" onkeypress="return trapenter(hour,event);" onchange="alertonchanges();" /&gt;
    &lt;/div&gt;
    &lt;div class="form-group form-inline"&gt;
     &lt;label class="control-label col-xs-2"&gt;Tid&lt;/label&gt;
     &lt;input class="form-control" type="text" name="hour" size="2" maxlength="2" value="23" onkeypress="return trapenter(minute,event);" onchange="alertonchanges();" /&gt;
     :
     &lt;input class="form-control" type="text" name="minute" size="2" maxlength="2" value="54" onkeypress="return trapenter(day,event);" onchange="alertonchanges();" /&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
     &lt;div class="col-xs-offset-2 col-xs-3"&gt;
      &lt;input type="submit" name="formflexin" class="btn btn-primary" value="Start"&gt;
      &lt;input type="reset" class="btn btn-default" value="Nulstil" onclick="givefocus(minute)"&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/form&gt;
          &lt;/div&gt;
  &lt;script src="//code.jquery.com/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>