title: Is this the proper way to use bootstrap to change the number of elements in a row
body: <p>I have a form with 4 elements.
  On small devices and all bigger devices, I want to display all 4 elements in the one row.
  On an extra-small device I want to display them in two rows, two elements per row.
  In pseudo code my HTML looks like</p>
  
  <pre><code>form-group form-group-xs form-group-sm
      xs-5 sm-3 elem1
      xs-7 sm-3 elem2
      xs-5 sm-3 elem3
      xs-7 sm-3 elem4
  end form-groups
  </code></pre>
  
  <p>This works but it seems to me this is not the way Bootstrap was designed to work. The problem I have with it is that it relies on wrapping to put elem3 and elem4 in row 2.</p>
  
  <p>Is this the proper way to use bootstrap to achieve my goal?</p>