声明

Question

が、私は私のサイドバー上にある特定のコンテンツを切り離すために管理とjQueryを使用して、私のナビゲーションバーの前に挿入された場合、コードは次のようになりますので、中サイズを変更トリガーする方法：

$(document).ready(function(){ 
 
    if($(window).width() < 1000){ 
 
    $(".red").detach().insertBefore(".blue"); 
 
    } 
 
});

.red{ 
 
    background: red; 
 
} 
 
.green{ 
 
    background: green; 
 
} 
 
.blue{ 
 
    background: blue; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<div class="main_container"> 
 
<p>This is the paragraph</p> 
 
    <a href="#">This is a link text</a> 
 

 
</div> 
 
<div class="red"> 
 
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, dicta modi ratione sit cupiditate qui tempore soluta, optio consequatur in vero. Qui deleniti voluptates quod, distinctio aperiam provident tempore facere.</h1> 
 
</div> 
 
<div class="green"> 
 
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, dicta modi ratione sit cupiditate qui tempore soluta, optio consequatur in vero. Qui deleniti voluptates quod, distinctio aperiam provident tempore facere.</h1> 
 
</div> 
 
<div class="blue"> 
 
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, dicta modi ratione sit cupiditate qui tempore soluta, optio consequatur in vero. Qui deleniti voluptates quod, distinctio aperiam provident tempore facere.</h1> 
 
</div>

しかし、大きな画面に戻っても、コンテンツはサイドバーに戻ってこないことに気付きました。

サイドバーのコンテンツを切り離して、600pxより小さいデバイスに配置してサイドバーに戻すにはどうすればよいですか？スクリーンの幅が600pxより大きい場合はサイドバーに戻します。

希望すると助かります。

Answer 1

$(window).resize(function(){ 
    if ($(window).width() < 600){ 
     $("#mobile_sidebar").detach().insertBefore(".home_page_banner"); 
    } 
});