スクリーン幅の変更で.insertBeforeを有効にする方法は？

Question

私は、画面の幅が767px未満の場合に、プライマリラッパーの上にセカンダリラッパーの位置を切り替えるスニペットを持っています。これは素晴らしいですが、リフレッシュ時にのみ機能します。画面の幅が変更されたときに自動的に動作させるにはどうすればよいですか？

ありがとうございます！総初心者はここに。

jQuery(document).ready(function(){ 

if(screen.width<=767){ 

jQuery('body.single #secondary').insertBefore('#primary'); 
} 

}); 

Answer 1

私は.resize（）メソッドをお勧めしますので、あなたはjqueryのを使用しているように思え。

https://api.jquery.com/resize/

ウィンドウのサイズが変更されるたびにこれが発生します。あなたはその時点で必要なことをやり遂げることができます。

$(window).resize(function(){ 
    If (myWindow.width() >= windowThreshold){ 
     //do all the things... 
    } 
}); 

Answer 2

window.addEventListener('resize', function() { 
// do something with screen width 
}); 

やjQueryを使って：

$(window).on('resize', function() { 
    // do something with screen width 
}) 

Answer 3

私は.resize()メソッドをお勧めします.JQueryを使用しているためです。このメソッドは、ウィンドウのサイズが変更されるたびに呼び出されます。

ここで、このようなコードを追加できます。

var windowThreshold = 767; 
 

 
$(window).resize(function() { 
 
    if ($(window).width() < windowThreshold + 1) { 
 
    // do something with $(window).width() 
 
    $("#log").append("<div>The window size is " + $(window).width() + "px</div>"); 
 
    $('#secondary').insertBefore('#primary'); 
 
    } 
 
});

#primary { 
 
    background-color: red; 
 
} 
 

 
#secondary { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="log"></div> 
 
<div id="primary">primary</div> 
 
<div id="secondary">secondary</div>

また、私はこれが受け入れ答えを持って知っているが、ちょうどレコードの、あなたはCSSをやらせることができ.on("resize", function() {})

$(window).on('resize', function() { 
 
    if ($(window).width() < windowThreshold + 1) { 
 
    // do something with $(window).width() 
 
    $("#log").append("<div>The window size is " + $(window).width() + "px</div>"); 
 
    $('#secondary').insertBefore('#primary'); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

を使用することができますメディアクエリーとフレックスボックスを使用して作業します。

body { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
} 
 
div { 
 
    margin: 0 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.box { 
 
    background: tomato; 
 
    order: 1; 
 
} 
 
.circle { 
 
    border-radius: 50px; 
 
    background: lightblue; 
 
    order: 2; 
 
} 
 
@media (max-width: 767px) { 
 
    .box { 
 
    order: 2; 
 
    } 
 
}

<div class="circle"></div> 
 
<div class="box"></div>