упаковка / изотопная сетка не перестраивается, как ожидалось

Я играл с каменной кладкой, изотопом и упаковкой в ​​​​течение нескольких часов и не могу ни за что заставить его работать, как ожидалось.

Моя цель создать сетку сообщений, сообщения могут иметь две ширины, 25% или 50% родительского контейнера. Ширина сообщения генерируется случайным образом на стороне сервера. Однако бывают случаи, когда первая строка содержит большой пробел, куда может поместиться сообщение. Чтобы проиллюстрировать это лучше, я собрал скрипку.

HTML

<div id="container" class="packery" style="width: 100%">
<div class="grid-sizer"></div>
<div class="item w" style="background-color:#aaa;"></div>
<div class="item w2" style="background-color:#ff0000; width:25%;"></div>
<div class="item w" style="background-color:#00ff00; width:50%;"></div>
<div class="item w" style="background-color:#affaff; width:50%;"></div>

The JS

docReady( function() {
var $container = jQuery('#container');
$container.packery({
  itemSelector: '.item',
  scolumnWidth : ".grid_sizer"
});     

});

и полная скрипка того, что я пытаюсь http://jsfiddle.net/nLqu015m/

В приведенном выше случае я бы ожидал, что packery переупорядочит элементы так, чтобы красный элемент был последним элементом, поскольку в строках перед последним нет неприглядных пробелов.

Я также пытался добиться того же в Isotope, но столкнулся с той же проблемой.

Я упускаю что-то очевидное или неправильно понимаю цель Packary и Isotope?

Любая помощь будет оценена по достоинству.