Responsive JS Reflow test

This test uses JS to move content around different placeholder <div>'s (or any element with a data-reflow attribute), tied together with a common id. A combination of display:none/block and media queries is what determines where the content goes. On pageload/resize, the script determines which elements are visible; those that are, will be populated, whilst those hidden (by CSS), will be emptied. This keeps DOM tree small (well, that's the theory anyway).

Of course the argument against this is using Javascript to do "layouts" and move content around. Responsive sites tend to progressively enhance on desktop by downloading content through AJAX and injecting it in the DOM. This is doing the same sort of DOM manipulation, but sans the extra network request.

Also, any "rich" modules that have interaction/event binding will have to be specially handled, but hey-ho, this is just a proof-of-concept.

Markup

<div class="primary-col">
    <div class="gallery" data-reflow="gallery">
        Content here
    </div>
</div>

<div class="secondary-col">
    <div class="gallery" data-reflow="gallery"></div>
</div>
    

CSS

.secondary-col .gallery { display: none; }

@media (min-width: 768px) {
    .primary-col .gallery   { display: none; }
    .secondary-col .gallery { display: block; }
}