 <p>I think you can create nested list groups and by changing their width you can create a responsive design. Using something like:</p> <pre><code>&lt;div class="col-lg-2 col-md-3 col-sm-12 col-xs-12"&gt; ... &lt;/div&gt; </code></pre> <p>With this way you can but 6 columns side by side in large screens and only one column for each row in smaller screens. </p> <p>Bootstrap should be used with 'mobile-first design' approach. So you must design your screen according to smaller screens first and then you should consider larger screen sizes.</p> <p>I advise you to spend some time in </p> <p>And here is a couple of demos for nested list groups:</p> <p><a href="http://stackoverflow.com/questions/29063244/consistent-styling-for-nested-lists-with-bootstrap">consistent-styling-for-nested-lists-with-bootstrap</a></p> <p><a href="http://www.bootply.com/DglnYJTSKA" rel="nofollow">nested list group example</a></p> <p>I hope this gives you a starting point.</p>