title: How to generate a dynamic column
body: <p>Ok, say I have this: </p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-xs-6"&gt;.col-xs-6&lt;/div&gt;
    &lt;div class="col-xs-6"&gt;.col-xs-6&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>That's two columns so far.</p>
  
  <p>Now, say the layout is supposed to change dynamically to three columns, like this maybe: </p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-xs-6 col-md-4"&gt;.col-xs-6 .col-md-4&lt;/div&gt;
    &lt;div class="col-xs-6 col-md-4"&gt;.col-xs-6 .col-md-4&lt;/div&gt;
    &lt;div class="col-xs-6 col-md-4"&gt;.col-xs-6 .col-md-4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How do I insert the third column dynamically? </p>
  
  <p>My javascript is non-exist, my jquery barely passing. But nonetheless, if the <em>javascript solution</em> is required here, let me know. </p>
  
  <p>Background info: This is in a ROR application that's using Backbone.js.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>For further clarification. </p>
  
  <p>So, say that the columns are unequal, and when you add another column dynamically, how do you adjust the other columns to reflect the additional column? </p>