jQueryでビューポートのサイズを変更するときの要素の位置を変更する：WordPressで作業していない

Question

私はこのトピックについて数時間の研究をしましたが、私が探していたものはあまり見つかりませんでした。私はWordPressでポートフォリオのウェブサイトを構築しています。私が気にしていたレイアウトの1つは、ブートストラップで重複した行を使って成功した portfolio layout です。 ビューポートが< 768pxのときに列がスタックして、行が互いにブロックされないようにするため、jQueryを使用してスクリプトを書きました。

jQuery(document).ready(function(){ 
    $(window).resize(function(){ 
     var width = $(window).width(); 
     if (width < 768) { 
      $(".col-sm-4.col-sm-offset-8.higher").removeClass("higher"); 
     } 
     else { 
      $(".col-sm-4.col-sm-offset-8").addClass("higher"); 
     } 
    }); 
}); 

私はCodePen上でそれをテストしてみた、それが正常に動作しているようだ：demoが、私はそれがWordPressで作業することに苦労しています。どんな洞察にも感謝します！

Answer 1

は、私はあなたが動作するようにページをたいか完全にわからないんだけど、私は唯一のブートストラップCSS、不要JSでこれを達成コラム積載行動in the Code Pen I forked from yours.

を達成信じています。

<div class="row"> 
    <div class="col-sm-4"> 
     <p class="p1">R1C1</p> 
    </div> 

    <div class="col-sm-4"> 
     <p class="p1">R2C2</p> 
    </div> 

    <div class="col-sm-4"> 
     <p class="p1">R3C3</p> 
    </div> 
</div> 

ブートストラップ・グリッドは、12列に配置されているため、各区間で使用される列の数は、典型的には、私はcol-sm-4によって指定等しいサイズのセクションに三つのセクションの各々を分離12.合計べきです。ブートストラップは、768ピクセルで発生するサイズ変更イベントを管理します。