title: Distribute Spans Evenly With Bootstrap
body: <p>I am working with a fluid-responsive bootstrap project. I have four spans; my goal is to show them 4x1, then 2x2, followed by 1x4. I am having trouble doing this without transitioning through 3x1+1.</p>
  
  <p>To show that graphically:</p>
  
  <p><img src="https://i.stack.imgur.com/jKezA.png" alt="Responsive design target"></p>
  
  <p>The only code I've found that works is below; in the 4x1 layout, it leaves a wide space between items 2 and 3.</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="span11"&gt;
          &lt;div class="span5"&gt;
              &lt;h2&gt;Item 1&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="span5"&gt;
              &lt;h2&gt;Item 2&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="span11"&gt;
          &lt;div class="span5"&gt;
              &lt;h2&gt;Item 3&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="span5"&gt;
              &lt;h2&gt;Item 4&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>