title: Bootstrap responsive: How to make columns in row move to only rows with small device?
body: <p>Actually I am trying to build a form that has two rows on desktops.
  Each of the rows has two columns.</p>
  
  <p>This is the code:</p>
  
  <pre><code>&lt;form class="form-horizontal"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-xs-6"&gt;&lt;/div&gt;
      &lt;div class="col-xs-6"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-xs-6"&gt;&lt;/div&gt;
      &lt;div class="col-xs-6"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When I try to open that form on a tablet or smartphone I want to display the columns as rows, too:</p>
  
  <pre><code>row1 with col1 and col2 shall become two rows.
  row2 with col3 and col4 shall become two rows.
  </code></pre>
  
  <p>How do I set this?</p>