Masonry bug – resize packs wrong, if I fix mobile skips

Hey guys!

I use your theme on a site with WooCommerce installed, and have my front page set to a masonry grid of products. Browser resizes would result in the masonry being packed wrong. When going from 3-column to 1 column (desktop -> tablet width) it would either overlap horribly, or introduce huge amounts of white space after each box.

I noticed this error in the console on browser resizes:

cannot call methods on masonry prior to initialization; attempted to call 'destroy'

I tracked it down to bazaar-lite/core/scripts/masonry.php#L38:

$('.row.masonry').masonry( 'destroy' );

should have been

$('.row.masonry').masonry().masonry( 'destroy' );

When I fixed this the error disappeared. However this introduced a worse bug on Chrome Android: the whole site would suddenly skip up when you scrolled or otherwise interacted with the masonry grid. I think it was jumping up to the first masonry item. Confusion, mis-tapping, wrath. It was like 9/11 a day later. Tragedy!

I commented out the entire line. This means users who resize the browser window are likely to see a wrong masonry layout.
Please help me fix this!