title: Twitter Bootstrap: force elements to be below each other on mobile devices
body: <p>I have a responsive layout using Twitter Bootstrap with two columns.</p>
  
  <ul>
  <li>div #charts shows some charting </li>
  <li>div #grid shows a table with text</li>
  </ul>
  
  <p>Problem: On smaller devices (e.g. Ipad, Iphone) the table gets very small and very long (due to word wrap). </p>
  
  <p>Question: Can I force the grid-div to be shown  BELOW the chart-div on small devices? </p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span8" id="charts"&gt;
               some charting
          &lt;/div&gt;
          &lt;div class="span4" id="grid"&gt;
               table with pager
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>