bootstrap custom column widths stack rather than shrink on resize
<p>I have a bootstrap grid layout as follows:</p>

<p>A col-sm-10 surrounded by a col-sm-1 on each side.</p>

<pre><code>+----+----------------------------+----+
|sm-1| sm-10                      |sm-1|
+----+----------------------------+----+
</code></pre>

<p>It's also using the list-group styling but I don't think that matters.</p>

<p>I need the col-sm-1 to be smaller than they are by default, and I remove padding, so I am overriding the style:</p>

<p>I change the col-sm-1 to a width of 4%, and the col-sm-10 to a width of 92%:</p>

<pre><code>.custom &gt; .list-group-item &gt; .col-sm-1 {
    width: 4%;
  background-color: green;
}
.custom &gt; .list-group-item &gt; .col-sm-10 {
    width: 92%;
  background-color: blue;

}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="custom list-group"&gt;
    &lt;div class="row list-group-item"&gt;

      &lt;div class="col-sm-1"&gt;
       xx
      &lt;/div&gt;

      &lt;div class="col-sm-10"&gt;
        MAIN
      &lt;/div&gt;


      &lt;div class="col-sm-1"&gt;
        xx
      &lt;/div&gt;

    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>THE ISSUE:  </p>

<p>I want the columns to stay in one row, with my customizations the columns "break" and "stack" rather than just shrinking and staying on one line like the standard bootstrap layout does.  You can see this in the link below, by dragging the window smaller:</p>

<p><a href="http://www.bootply.com/9CVohbVSTL" rel="nofollow">http://www.bootply.com/9CVohbVSTL</a></p>