title: Right aligned control labels in form-horizontal
body: <p>I'm trying to do a two-column form that behaves as follows with Twitter Bootstrap (3.2.0):</p>
  
  <ul>
  <li>on extra-small (xs) screens, the second column is shown below the first column, control labels are shown above the input fields</li>
  <li>on small (sm) screens, the two columns are shown beside each other, control labels are shown above the input fields</li>
  <li>one medium (md) screens, the two columns are shown beside each other, control labels are horizontally aligned with their input fields</li>
  </ul>
  
  <p>My code below (also at <a href="http://jsfiddle.net/mieckert/pfnbxbbo/" rel="nofollow">http://jsfiddle.net/mieckert/pfnbxbbo/</a>) works with one issue:  on small screens, the control labels are shown above their input fields, but they are right aligned (instead of proper left alignment).</p>
  
  <p>The cause of this is that bootstrap in <code>forms.less</code> switches on right alignment based on a media query: </p>
  
  <pre><code>form-horizontal {
    @media (min-width: @screen-sm-min) {
      .control-label {
        text-align: right;
        margin-bottom: 0;
        padding-top: (@padding-base-vertical + 1); // Default padding plus a border
      }
    }
  </code></pre>
  
  <p>Is there a way I can teach bootstrap to use a different media query (say for <code>@screen-md-min</code>) without having to modify the bootstrap source itself, i.e., by overriding it in another less file that has an <code>@import "bootstrap/less/bootstrap.less"</code>?  Especially is it possible to do this in a way that I'm not actually querying the screen width but rather the width of the current column?  (Otherwise it would affect other forms that have a single column layout and still align horizontally as well.)  Or are there any other, better ways to achieve the responsive behavior I described?</p>
  
  <pre><code>    &lt;div class="container-fluid"&gt;
          &lt;form class="form-horizontal" role="form" action="#"&gt;
              &lt;div class="col-xs-12 col-sm-6 col-md-6"&gt;
                  &lt;div class="form-group col-xs-12 col-sm-12 col-md-12"&gt;
                      &lt;label class="control-label col-xs-12 col-sm-12 col-md-3"&gt;First name&lt;/label&gt;
                      &lt;div class="col-xs-12 col-sm-12 col-md-9"&gt;
                          &lt;input type="email" class="form-control" placeholder="Enter email"/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group col-xs-12 col-sm-12 col-md-12"&gt;
                      &lt;label class="control-label col-xs-12 col-sm-12 col-md-3"&gt;Last name&lt;/label&gt;
                      &lt;div class="col-xs-12 col-sm-12 col-md-9"&gt;
                          &lt;textarea class="form-control"&gt;
                          &lt;/textarea&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-sm-6 col-md-6"&gt;
                  &lt;div class="form-group col-xs-12 col-sm-12 col-md-12"&gt;
                      &lt;label class="control-label col-xs-12 col-sm-12 col-md-3"&gt;Phone number&lt;/label&gt;
                      &lt;div class="col-xs-12 col-sm-12 col-md-9"&gt;
                          &lt;textarea class="form-control"&gt;
                          &lt;/textarea&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group col-xs-12 col-sm-12 col-md-12"&gt;
                      &lt;label class="control-label col-xs-12 col-sm-12 col-md-3"&gt;Remarks&lt;/label&gt;
                      &lt;div class="col-xs-12 col-sm-12 col-md-9"&gt;
                          &lt;input type="email" class="form-control" placeholder="Enter email"/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>