JSFiddle - React, Tailwind, and code Playground

by pedalpete

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div class="holdBlock">
    <div class="block large">
        <div class="order">1</div>
        <h1>1st item</h1>
    </div>
     <div class="block">
           <div class="order">3</div>
        <h1>2nd item</h1>
    </div>
     <div class="block">
           <div class="order">2</div>
        <h1>3rd item</h1>
    </div>
     <div class="block">
           <div class="order">4</div>
        <h1>4th item</h1>
    </div>
     <div class="block">
           <div class="order">5</div>
        <h1>5th item</h1>
    </div>
     <div class="block">
           <div class="order">6</div>
        <h1>6th item</h1>
    </div>
     <div class="block">
           <div class="order">7</div>
        <h1>7th item</h1>
    </div>
    
</div>

CSS

div.holdBlock {
 width: 580px;
 height: 215px;  
    overflow: hidden;
    border:1px solid green;
}

div.block {
 height: 95px;
  width: 95px;
   border: 2px solid #888;
   background-color: #333; 
   color: #fff;
   margin: 6px;
}

div.large {
  height: 205px;
  width: 205px;  
}

JavaScript

jQuery(document).ready(function(){
    
    
    function setIsotope(container){
    $(container).isotope({
        itemSelector: '.block',
        getSortData : {
         number : function ( $elem ) {
    return parseInt( $elem.find('.order').text(), 10 );
          },
        },
        sortBy: 'number',
        masonry :{
            columnWidth: 115   
        }
    }); 
}
            setIsotope('div.holdBlock');           
                       
    $('div.block').click(function(){
 
       var $container=$(this).parents('div.holdBlock');
         $('div.large').removeClass('large');
         $(this).addClass('large')
             var getSort=parseFloat($(this).find('div.order').text());
            
        if($.inArray(getSort,[5,6,7])>-1){
            var switchSort=getSort-3;
            $('div.block:eq('+switchSort+') div.order',$container).text(getSort);
            $('div.order',this).text(switchSort)
        }
        $container.isotope('destroy');
        setIsotope($container);
        
      
    });
    
});