HTML

<!--
See my REMux collection for more examples:
http://codepen.io/collection/nDhkf
REMux is an idea I had while reading some articles about REM units and screen real estate usage beyond 960px. Basically REMux is able to scale a layout to fit the available screen real estate within the boundaries of one or numerous layouts (and their breakpoints respectively). So within a single layout there is no re-ordering of elements, jerky changes in proportions etc.
REMux consists of two things:
1. Use only REM as unit in your CSS
2. A small javascript class that handles the initialization of layouts and handles everything else.
The javascript does not depend on jQuery - I only included it for convenience for the info panel.
See it in action on my personal website (work in progress):
=> http://www.qoopido.com
REMux is part of the GitHub repository for all my Javascripts, so source code is available under:
=> https://github.com/dlueth/qoopido.js/blob/master/src/remux.js
-->
<div id="panel">
<dl>
<dt>width:</dt>
<dd class="width"></dd>
<dt>font-size:</dt>
<dd class="fontsize"></dd>
<dt>layout:</dt>
<dd class="layout"></dd>
</dl>
</div>
<section>
<div>
<div class="small">1</div>
<div class="medium">2</div>
<div class="large">3</div>
<div class="medium">4</div>
<div class="small">5</div>
</div>
</section>

Misc

We're all for progressive enhancement, but CodePen is a bit unique in that it's all about writing and showing front end code, including JavaScript. It's required to use most of the features of CodePen.