title: Bootstrap (and Angular) validation vs responsive conflict
body: <p>Imagine a simple a form consisting of two rows and two columns:</p>
  
  <p>Title..............Password<br>
  First name....Repeat password</p>
  
  <p>If each ‘row’ is wrapped up in a <strong>div class=”row”</strong>, a validation message appearing under Password correctly shifts downwards both fields in the second row – ‘First name’ and ‘Repeat password’. Everything is neatly aligned, great! However, if I shrink the screen to the size of a mobile device an incorrectly ordered single column is created:</p>
  
  <p>Title</p>
  
  <p>Password</p>
  
  <p>First name</p>
  
  <p>Repeat password</p>
  
  <p><strong>Instead of:</strong></p>
  
  <p>Title</p>
  
  <p>First name</p>
  
  <p>Password</p>
  
  <p>Repeat password</p>
  
  <p>However, if I instead have one row and place the ‘Title’ and ‘First name’ column form groups in one <strong>div class="col-md-6"</strong>, and the ‘Password’ and ‘Repeat password’ inside a second <strong>div class="col-md-6"</strong>, I get the correctly ordered single column on a small screen – which is great, but validation messages knock the row cells out of vertical alignment on a large screen i.e.</p>
  
  <p>Title..............Password</p>
  
  <p>First name...(Required)</p>
  
  <p>....................Repeat password.</p>
  
  <p>Any ideas on how to get both correct alignment and sensible responsiveness? I’ve included a plunk to illustrate. (View on full screen.)</p>
  
  <p><a href="http://plnkr.co/edit/MKiS8MMfnivtb8ZTqmuZ?p=preview" rel="nofollow">http://plnkr.co/edit/MKiS8MMfnivtb8ZTqmuZ?p=preview</a></p>
  
  <p>Many thanks in advance...</p>
  
  <pre><code>&lt;HTML&gt;
  </code></pre>