title: Grid System Order in Boostrap 2
body: <p>I have a problem with the <a href="http://twitter.github.com/bootstrap/scaffolding.html#gridSystem" rel="nofollow">Grid System</a> of Bootstrap 2.</p>
  
  <p>I want to make a header with some text, and an image on the right of it.<br />
  Therefore I made a <code>row</code>, and put a <code>span8</code> and a <code>span4</code> inside of it.</p>
  
  <p>However, when the window gets too small for the content to be displayed side by side, I want the <code>span4</code> div to come before the <code>span8</code> div.</p>
  
  <pre><code>&lt;div class="hero-unit"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="span8"&gt;
                  This is some text
              &lt;/div&gt;
              &lt;div class="span4"&gt;
                  &lt;img src="image.png" alt="" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>How can I do this?<br />
  So in other words, how can I change the order of the <code>div</code>s.</p>
  
  <p>If I'm not completely mistaking, there is no such thing described in the documentation.</p>