title: Refresh page when media query breakpoints are triggered
body: <p>I'm building a bootstrap based layout that has 4 columns and two rows on large, 2 columns and 4 rows on small and 1 column and 8 rows on extra small sizes, and with some help I managed to build the script that manipulates the DOM when media query breakpoints are triggered to insert new row and hr divider between rows for smaller screen sizes;
  This works well for adjacent MQ breakpoints, but I need to refresh the page when media query breakpoints are triggered to reset the DOM because the layout starts braking further down the media query breakpoints the window is resized.
  I know how to refresh the page on window width resize, but this is impractical because it refreshes the page every time the window is resized, and I only need to trigger refresh on media query breakpoints. How do I do this?</p>
  
  <p>Here is the script that I'm using to manipulate the dom:</p>
  
  <pre><code>    var $mainElem = $('.latest-posts'),
    $parent = $mainElem.parent(),
    $nav=$('.before-navigation')
  
  if ($(window).width() &lt; 768){     
    var $items = $mainElem.children(':gt(0)').detach()
    if ($items.length) {
      for (var i = 0; i &lt; $items.length; i = i + 1) {
        var $row = $('&lt;div class="row latest-posts"&gt;').append($items.slice(i, i + 1));
        $nav.before('&lt;hr class="small-article-divider"&gt;').before($row);
  
      }
    }
  }else if ($(window).width() &gt;= 768 &amp;&amp; $(window).width() &lt;= 970){     
    var $items = $mainElem.children(':gt(1)').detach()
    if ($items.length) {
      for (var i = 0; i &lt; $items.length; i = i + 2) {
        var $row = $('&lt;div class="row latest-posts"&gt;').append($items.slice(i, i + 2));
        $nav.before('&lt;hr class="small-article-divider"&gt;').before($row);
  
      }
    }
  }else if($(window).width() &gt; 970){
    var $items = $mainElem.children(':gt(3)').detach()
    if ($items.length) {
      for (var i = 0; i &lt; $items.length; i = i + 4) {
        var $row = $('&lt;div class="row latest-posts"&gt;').append($items.slice(i, i + 4));
        $nav.before('&lt;hr class="small-article-divider"&gt;').before($row);
  
      }
    }
  }
  </code></pre>