title: Bootstrap Carousel - Item Child Management
body: <p>In the bootstrap carousel <a href="http://jsfiddle.net/hacb6dcw/1/" rel="nofollow">JSFiddle</a>, I have 3 items in a row in items as follows:</p>
  
  <pre><code>&lt;div class='item'&gt;
      &lt;div class='col-md-6 col-md-4 sub-item'&gt;Sub Item&lt;/div&gt;
      &lt;div class='col-md-6 col-md-4 sub-item'&gt;Sub Item&lt;/div&gt;
      &lt;div class='col-md-6 col-md-4 sub-item'&gt;Sub Item&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='item'&gt;
      &lt;div class='col-md-6 col-md-4 sub-item'&gt;Sub Item&lt;/div&gt;
      &lt;div class='col-md-6 col-md-4 sub-item'&gt;Sub Item&lt;/div&gt;
      &lt;div class='col-md-6 col-md-4 sub-item'&gt;Sub Item&lt;/div&gt;
  &lt;/div
  </code></pre>
  
  <p>The problem is when the screen gets small, the sub items <strong>obviously do not come in a line</strong>.</p>
  
  <p>For example the DOM be something like (When the screen gets small):</p>
  
  <pre><code>&lt;div class='item'&gt;
      &lt;div class='col-md-6 col-md-4 sub-item'&gt;Sub Item&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='item'&gt;
      &lt;div class='col-md-6 col-md-4 sub-item'&gt;Sub Item&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>What I want is to is automatically fit the number of sub-items so that it can
    fit on a screen. If the screen fits only two contents and if the current <code>item</code> has three contents, move it to upcoming carousel <code>item</code>. Possible?</p>
  </blockquote>