Isotope - fitColumns in fit container

Re http://stackoverflow.com/questions/5100009/relayout-items-with-isotope-doesnt-seem-to-maintain-structure

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">
  <div class="item large">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

CSS

#container {
  width: 300px;
  height: 300px;
  max-width:300px;
  max-height:300px;
  min-width:300px;
  min-height:300px;
  overflow:none;
  position:relative;
}

.placeholder {
    background-color:#cccccc !important;
}

.dragging { opacity: .8; background: red !important; }



.item {
  width: 100px;
  height: 100px;
  background: #26D;
  float: left;
  color: white;
  font-size: 60px;
  display:block;
}

.item.large {
  width: 200px;
  height: 200px;
  background: #2D6;
  z-index: 10;
}


/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;

}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

.card-sortable-placeholder {
    background-color:#cccccc;
}

JavaScript

$(function(){
  var $container = $('#container'),
      $items = $('.item');
    
  $container.disableSelection();  
    
  $container.isotope({
    itemSelector: '.item',
    masonry: {
        columnWidth: 100,
    },
    resizesContainer : true,
   getSortData : {
      fitOrder : function( $item ) {
        var order, index = $item.index();
          
        var columns = 3;
        if(index % columns == 0) { //element 1 should appear first
              order = index;
        }
        else if ( $item.hasClass('large')) {
              order = index + columns - (index % columns) + .5;
        } 
        else {
              order = index;
        }
        
        return order;
      }
    },
    sortBy : 'fitOrder'
  });
   
    
  
  $items.click(function(){
    var $this = $(this);
    // nothing to change if this already has large class
    if ( $this.hasClass('large') ) {
      return;
    }
    var $previousLargeItem = $items.filter('.large');
    
    $previousLargeItem.removeClass('large');
    $this.addClass('large');
    $container
      // update sort data on changed items
      .isotope('updateSortData', $this )
      .isotope('updateSortData', $previousLargeItem )
      // trigger layout and sort
      .isotope('reLayout');
  });
    
});