title: Unable to get Packery item layout order
body: <p>I am trying to make a layout mixed width/fixed height boxes to work using Packery.</p>
  
  <p>While I can get Packery to work, and lays things out fine — I need to know the order as presented on screen after the layout is completed (not the order of the DOM) so that I can do some tweaks to certain blocks if it is preceded by another specific block type.</p>
  
  <p>I have three 'block sizes' — <code>100%</code>, <code>33.3333%</code> (1/3) and <code>66.6667%</code> (2/3). This means that, in some cases, if there's a narrow block (1/3) that'll fit next to smaller blocks further up, the blocks position on screen is different from the DOM (eg. up higher).</p>
  
  <p>Basically I need this solution (refresh index/position of item after drag/drop) but on load: <a href="https://codepen.io/desandro/pen/mdJnF" rel="nofollow noreferrer">https://codepen.io/desandro/pen/mdJnF</a>. This SO post also brings this up (slightly differently, and the solution is the same): <a href="https://stackoverflow.com/questions/27591587/determine-the-alignment-order-of-the-items-with-packery">Determine the alignment order of the items with packery</a></p>
  
  <p>When I try to implement the code to get the elements and their position, it just spits out the DOM order, throwing things out. I can't for the life of me work out why it's not working.</p>
  
  <p>Reduced test case available here: <a href="https://jsfiddle.net/4q73tbwe/1/" rel="nofollow noreferrer">https://jsfiddle.net/4q73tbwe/1/</a></p>