A bug in isotope that causes multiple columns to collapse into a single column.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.1.1/isotope.pkgd.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Isotope one column bug</h1>
    <button id="update">update</button>
    <div>
      <h3>Filters</h3>
      <ul>
      <li><a href="#*"  class='filter' data-filter="*" >all</a></li>
      <li><a href="#derp"  class='filter' data-filter=".derp" >herp</a></li>
      <li><a href="#herp"  class='filter' data-filter=".herp" >derp</a></li>
      <li><a href="#other" class='filter' data-filter=".other"  >other</a></li>
    </ul></div>
    <div id="isohook">
      <div class="item regSize derp other post-selector">1</div>
      <div class="item regSize herp post-selector">2</div>
      <div class="item regSize derp post-selector">3</div>
      <div class="item regSize other derp post-selector">4</div>
      <div class="item regSize post-selector">5</div>
      <div class="item regSize derp post-selector">6</div>
      <div class="item regSize herp post-selector">7</div>
      <div class="item regSize herp post-selector">8</div>
      <div class="item regSize herp post-selector">9</div>
      <div class="item regSize post-selector">10</div>
      <div class="item regSize other derp post-selector">11</div>
      <div class="item regSize other derp post-selector">12</div>
      
    </div>
    <hr />
  <figure>
    <figcaption><h1>Actual (with bug)</h1></figcaption>
    <a href="http://imgur.com/53sbugF"><img src="http://i.imgur.com/53sbugF.png" title="source: imgur.com" /></a>
  </figure>
  <figure>
    <figcaption><h1>Expected</h1></figcaption>
    <a href="http://imgur.com/Lyotsvt"><img src="http://i.imgur.com/Lyotsvt.png" title="source: imgur.com" /></a>
  </figure>
    
  </body>

</html>

// Code goes here
var $ = jQuery;

var configObj = configObj || {
        layout: 'masonry'
    ,   itemSelector: '.post-selector'
    ,   masonry: {
          columnWidth: '.regSize'
      ,   gutter: 10
      // ,   isFitWidth : true
      }
  
};



function update(){
  $('#isohook').isotope(configObj);
  return $('#isohook');
}

function scrollTo(destination, time, $win){
  var animationTime = (time) ? time : 1000;
  var win = ($win) ? $win : $('html,body');
  
  
    win.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function (e) {
      if (e.which > 0 || e.type === "mousedown" || e.type === "mousewheel") {
        win.stop(true, false);
        win.unbind("scroll mousedown DOMMouseScroll mousewheel keyup");
      }
    });
    win.stop().animate({
      scrollTop: destination
    }, animationTime, 'swing', function(){
      win.unbind("scroll mousedown DOMMouseScroll mousewheel keyup");
      return true;
    });
}


function toggleSelected(obj){
  var $selected = $ ('.selected');
  
  if($(obj).hasClass('selected') !== true){
    if($('.selected')){
      $ ('.selected').
        removeClass ('selected bigSize').
        addClass ('regSize');
    }
  }
  
  $(obj).
    addClass('selected').
    removeClass('regSize').
    addClass('bigSize');
    
    update().isotope('once', 'layoutComplete', function(){
      var top = $(obj).offset().top;
      scrollTo(top);
      
    });
    
}


function triggerFilter(filter){
  $('#isohook').isotope({filter : filter});
}



jQuery(document).ready(function($){
  $('#isohook').isotope(configObj);
  
  
  $('#update').click(function(){
    toggleSelected($('.post-selector').eq(0));
    $('#isohook').isotope(configObj);
  });
  
  $('.post-selector').click(function(e){
    toggleSelected(this);
  });
  $('.filter').click(function(e){
    var filter ;
    e.preventDefault();
    filter = $(this).data('filter');
    console.log(filter);
    triggerFilter(filter);
    
  });
  
});

/* Styles go here */
body{
  font: normal normal normal 15px "Helvetica";
}

h1, h3{
  text-align: center;
  
}
#isohook{
  width: 100%;
  border: 1px solid red;
}

.post-selector {
  background: #f5f5f5;
  box-sizing: border-box;
  margin-top:10px;
  height: 300px;
}
.selected{
  border: 2px solid #00ffff;
}
.bigSize {
  width: 65.66%;
}

.regSize {
  width: 32.33%;
  cursor: pointer;
  background:#eee;
  border:2px solid black;
}

 .post-selector img
,.post-selector video
,.post-selector audio {
  width: 100%;
  height: auto;
}



@media (max-width: 499px) {

  .post-selector {
    margin: 1% 0 1% 1%;
  }
  .regSize {
    width: 48%;
  }

  .bigSize {
    width: 98%;
  }
}


ul{
  display: flex;
  width: 100%;
}
li{
  flex: 1;
  list-style-type: none;
}

li a {
  border: 1px solid blue;
  display: block;
  text-align: center;
  margin: 10px;
}

# Isotope one column bug


#### Steps to reproduce

+ Click the "update" button. This should make the first box 2 columns wide.
+ Click the "herp" filter.
+ Click the "herp" filter again.

Or

+ Click a box. The border of it should turn blueish and should be the width of roughly two normal columns. The window should also scroll to the selected box.
+ Click a filter that contains the selected box.
+ Click the filter again.
+ Shouldn't have an effect but it instead moves boxes to one per line.

### Result:

The boxes collapse to one box per line.
That's the bug. 
The expected behavior is for the one box to be expanded and the other ones should fit the way they normally would;
If the filter is clicked multiple times the bug will occur.

For example:

Clicking "update" should expand rectangle 1.
Clicking herp should filter out some of the rectangles, leaving 1, 3, 4 and 6
Clicking herp again will make 1, 3, 4 and 6 be on their own lines.

Clicking "all" will reset columns to normal behavior until you click herp twice again.