How to display divs in random order with packery.js

I have a packery.js layout of divs of three different sizes. I would like them to appear in random order every time the page loads but so far I can only get the content inside the divs to randomize. So on refresh I get the divs in the same order/pattern but the content inside in a different order.

Here's the basic HTML:

<div class="container">
  <div class="grid">
    <div class="grid-item grid-item--height2">
      <div class="grid-item-content">
        <p>content here</p>
      </div>
    </div>
    <div class="grid-item grid-item--width2">
      <div class="grid-item-content">
        <p>content here</p>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-item-content">
        <p>content here</p>
      </div>
    </div>
  </div>
</div>

Here's my CSS:

.grid {
  width: 100vw;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 120px;
  height: 120px;
  background: #ffffff;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}

.grid-item:hover {
  cursor: pointer;
}

.grid-item--width2 { width: 240px; }
.grid-item--height2 { height: 240px; }

.grid-item--large {
  width: 480px;
  height: 300px;
  background-color: slategrey;
}

& my Javascript:

var $grid = $('.grid').packery({
  itemSelector: '.grid-item'
});

$grid.on( 'click', '.grid-item', function( event ) {
  // change size of item by toggling large class
  $(  event.currentTarget  ).toggleClass('grid-item--large');
  // trigger layout after item size changes
  $grid.packery('layout');
});

  (function($) {

            $.fn.randomize = function(tree, childElem) {
              return this.each(function() {
                var $this = $(this);
                if (tree) $this = $(this).find(tree);
                var unsortedElems = $this.children(childElem);
                var elems = unsortedElems.clone();

                elems.sort(function() { return (Math.round(Math.random())-0.5); });  

                for(var i=0; i < elems.length; i++)
                  unsortedElems.eq(i).replaceWith(elems[i]);
              });    
            };

          })(jQuery);

          $(document).ready(function() {
              $(".container").css("display", "block");
              $("div.grid").randomize("div.grid-item");
          });

I don't know if I'm just putting the js in the wrong order or something but I can't figure it out - I would really appreciate a push in the right direction!

Thank you.