title: Bootstrap Grid Responsive break row
body: <p>I'm currently working with bootstrap grid system and got the following problem:</p>
  
  <p>I got components that stack together in 4 columns when > tablet.
  and in 2 columns when &lt; tablet.
  Some of the components are with Links and some without.</p>
  
  <pre><code>        &lt;div class="col-xs-6 col-md-3"&gt;
              &lt;p&gt;&lt;img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /&gt;&lt;/p&gt;
            &lt;div class="iconname"&gt;Test1&lt;/div&gt;
            &lt;div class="text align-left icondescription"&gt;Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.&lt;/div&gt;
            &lt;div class="align-left"&gt;&lt;a href="product.html" class="product-button"&gt;&lt;span class="arrow"&gt;&amp;gt;&lt;/span&gt; ABCDE TEST1 PRODUCTS&lt;/a&gt;&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/0q346dde/" rel="nofollow">http://jsfiddle.net/0q346dde/</a></p>
  
  <p>This works fine, but between 440px and 485px width, the link with: > ABCDE TEST1 PRODUCTS gets a break row since there is no space any more. It occurs until the second link (which label has less characters) with > ABCDE TES PRODUCTS gets a break.</p>
  
  <p>Now I've tried to set "white-space: nowrap;" on the links, but then it won't look good &lt; 400px, since they overlap each other.</p>
  
  <p>Anyone can help me?</p>