同位素jquery插件过滤后的作品集使图像在mobile（html）和wordpress（在所有媒体上）彼此折叠

Question

同位素jquery插件过滤后的作品集将彼此折叠在一起的图像 mobile（html）和wordpress（在所有媒体上）。
 我正在将html转换为wordpress和 它都崩溃了，我尝试了修整和砌筑，没有解决办法，也尝试了 一些css tho，当我重新加载页面时不存在问题，谢谢 预先。

// portfolio 

     $(".all-portfolios").isotope({
        itemSelector: '.single-portfolio',
        layoutMode:/* 'fitRows'*/ 'masonry',
        percentPosition: true,
    });

    $('ul.filter li').click(function(){ 

      $("ul.filter li").removeClass("active");
      $(this).addClass("active");        

        var selector = $(this).attr('data-filter'); 
        $(".all-portfolios").isotope({ 
            filter: selector, 
            animationOptions: { 
                duration: 2200, 
                easing: 'linear', 
                queue: false, 
            } 
        }); 
      return false; 
    }); 



    <!-- start portfolio -->
        <div id="portfolio" class="portfolio" same-id="work">
            <div class="container">
                <div class="row pad space-between">
                    <div class="col-12 col-md-4">
                        <h1>Satchel</h1>
                    </div>         
                    <div class="portfolio-filter col-12 col-md-8">
                        <ul class="filter space-between">
                            <li class="active" data-filter="*">Latest<span class="underline"></span></li>
                            <li data-filter=".branding">Branding<span class="underline"></span></li>
                            <li data-filter=".Apps">Apps<span class="underline"></span></li>
                            <li data-filter=".illustration">Illustration<span class="underline"></span></li>
                         </ul>
                    </div>
                </div>
            </div>
            <div class="all-portfolios">
                <div class="single-portfolio illustration ">
                    <figure>
                        <img class="img-responsive" src="img/portfolio-1.png" alt="portfolio-1">
                        <div>
                            <h5>Cold fusion</h5>
                            <span>19 / 8 / 2016</span>
                        </div>
                        <span class="t"></span>
                        <span class="r"></span>
                        <span class="b"></span>
                        <span class="l"></span>
                    </figure>
                </div>
                <div class="single-portfolio Apps">
                    <figure>
                        <img class="img-responsive" src="img/portfolio-2.png" alt="portfolio-2">
                        <div>
                            <h5>Firestorm</h5>
                            <span>19 / 8 / 2016</span>
                        </div>
                        <span class="t"></span>
                        <span class="r"></span>
                        <span class="b"></span>
                        <span class="l"></span>
                    </figure>
                </div>
                <div class="single-portfolio branding">
                    <figure>
                        <img class="img-responsive" src="img/portfolio-3.png" alt="portfolio-3">
                        <div>
                            <h5>Gemini-64</h5>
                            <span>19 / 8 / 2016</span>
                        </div>
                        <span class="t"></span>
                        <span class="r"></span>
                        <span class="b"></span>
                        <span class="l"></span>
                    </figure>
                </div>
                <div class="single-portfolio branding ">
                    <figure>
                        <img class="img-responsive" src="img/portfolio-4.png" alt="portfolio-4">
                        <div>
                            <h5>Wide Stringer</h5>
                            <span>19 / 8 / 2016</span>
                        </div>
                        <span class="t"></span>
                        <span class="r"></span>
                        <span class="b"></span>
                        <span class="l"></span>
                    </figure>
                </div>
                <div class="single-portfolio illustration Apps ">
                    <figure>
                        <img class="img-responsive" src="img/portfolio-5.png" alt="portfolio-5">
                        <div>
                            <h5>dejaVu</h5>
                            <span>19 / 8 / 2016</span>
                        </div>
                        <span class="t"></span>
                        <span class="r"></span>
                        <span class="b"></span>
                        <span class="l"></span>
                    </figure>
                </div>
                <div class="single-portfolio branding illustration">
                    <figure>
                        <img class="img-responsive" src="img/portfolio-6.png" alt="portfolio-6">
                        <div>
                            <h5>Echo Lake</h5>
                            <span>19 / 8 / 2016</span>
                        </div>
                        <span class="t"></span>
                        <span class="r"></span>
                        <span class="b"></span>
                        <span class="l"></span>
                    </figure>
                </div>
            </div>
        </div>
    <!-- end portfolio -->