title: Vanilla Masonry + JQuery Flip
body: <p>I'm runnig RoR application with a wall of blocks using Vanilla Masonry, and each block in this wall could be flipped with JQuery Flip! plugin. The issue is that the length of contents on each side of the block could be different, so I want the wall positions reloading after each flip action, to avoid overlapping.</p>
  
  <p>My code works one-way, when I flip the block for the first-time, but when I revert flipping, I encounter overlapping.</p>
  
  <p>I initialize Masonry on load and here is my code for flipping-wall.js:</p>
  
  <pre><code>$(document).ready(function(){
      $('.sponsorFlip').bind("click",function(){
              var elem = $(this);
      var wall = new Masonry( document.getElementById('container'), {
                      gutterWidth:5,
                      isFitWidth: true
                    });
  
      if(elem.data('flipped'))
      {
          elem.revertFlip();
          elem.data('flipped',false);
                      wall.reload();  
      }
      else
      {
          elem.flip({
              direction:'lr',
              speed: 350,
              onBefore: function(){
                  elem.html(elem.siblings('.sponsorData').html());
              }
          });
          elem.data('flipped',true);
          wall.reload();
      }
  });
  
  });
  </code></pre>
  
  <p>Here is three steps:</p>
  
  <p><img src="https://i.stack.imgur.com/tP0An.jpg" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/mDKpH.jpg" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/kHZEl.png" alt="Step3"></p>
  
  <p>Please, can you tell me what am I doing wrong.
  Thanks guys.</p>