 <p>Another approach would simply use media queries to change the width of the divs. This would allow you to avoid adding more markup.</p> <p><a href="http://jsfiddle.net/14ecjy7n/1/" rel="nofollow">http://jsfiddle.net/14ecjy7n/1/</a></p> <pre><code>div { box-sizing: border-box; float: left; } @media all and (max-width: 639px) { div { width: 50%; } } @media all and (min-width: 640px) { div { width: 100%; } } </code></pre>