Moving content around with Javascript templates

Say you have a page with 8 items on it. The HTML could be like so:

<div id="content">  
    <div class="content content-primary">
        <div class="item item-1">
            // Content
        </div>
        <div class="item item-2">
            // Content
        </div>
        <div class="item item-3">
            // Content
        </div>
        <div class="item item-4">
            // Content
        </div>
        <div class="item item-5">
            // Content
        </div>
    </div>
    </div class="content content-secondary">
        <div class="item item-6">
            // Content
        </div>
        <div class="item item-7">
            // Content
        </div>
        <div class="item item-8">
            // Content
        </div>
    </div>
</div>  

And on a smaller resolution (we'll call this mobile for ease) and medium resolution (tablet) the order needs to be:

item-1, item-4, item-5, item-6, item-7, item-2, item-3, item-8  

We can't use Flexbox and the nice new CSS order property as our .content wrappers would get in the way.

Here comes JS Templates to the rescue.

First, we'll remove the content from our div.items and add it to our JS template script blocks. Place these in the HTML just before the div.items we coded earlier.

<script id="item-1">  
    // content
</script>  
<script id="item-2">  
    // content
</script>

...

<script id="item-8">  
    // content
</script>  

We'll then need to create a JS array to house all of our parameters for the media query switcher we'll build later on. Place this in a script tag or in a seperate JS file.

var content = [  
  { id: 'item-1', mobile: 1, tablet: 1, desktop: 1 },
  { id: 'item-2', mobile: 4, tablet: 4, desktop: 2 },
  { id: 'item-3', mobile: 5, tablet: 5, desktop: 3 },
  { id: 'item-4', mobile: 6, tablet: 6, desktop: 4 },
  { id: 'item-5', mobile: 7, tablet: 7, desktop: 5 },
  { id: 'item-6', mobile: 2, tablet: 2, desktop: 6 },
  { id: 'item-7', mobile: 3, tablet: 3, desktop: 7 },
  { id: 'item-8', mobile: 8, tablet: 8, desktop: 8 }
  ];

We can now populate our empty div.items with content from our JS template blocks on the fly. We're going to move the content around based on media queries using Window.matchMedia. Add the following after the content variable we created previously.

$('.item', '#content').empty();
if (window.matchMedia('screen and (max-width: 599px)').matches) {  
    $(content).each(function(i, item) {
        $('.item-' + item.mobile, '#content').html($('#' + item.id).html());
    });
} else if (window.matchMedia('screen and (min-width: 600px) and (max-width: 959px)').matches) {
    $(content).each(function(i, item) {
        $('.item-' + item.tablet, '#content').html($('#' + item.id).html());
    });
} else {
    $(content).each(function(i, item) {
          $('.item-' + item.desktop, '#content').html($('#' + item.id).html());
    });
}

And that should be it. Content will drop in and out of each div.item depending on the rules we set in our array previously. A working Codepen can be seen below:

Hope you like how quick and easy it is to do this.