jQueryで要素の幅に応じて、コンテンツの位置を入れ替える

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。

CSSだけで、要素の幅に応じて、2つのタグを交互に移動するみたいな機能が見つけても、なかったので、jQueryで作ってみた。目的は、レスポンシブで、要素を動かしたかったからです。

HTML側

<div id="size"><input type="button" id="pix" value="クリックして"></div>
<hr>
<div id="size2"></div>

jQuery側

$(function(){
	$(window).on('resize',function(){
		var p = "";
		if($(window).width() <= 560){
			if($('#size').html() !== ""){
				p = $('#size').html();
				$('#size').html("");
				$('#size2').html(p);
			}
		}else{

			if($('#size2').html() !== ""){
				p = $('#size2').html();
				$('#size2').html("");
				$('#size').html(p);
			}
		}
	});

	$(document).on('click', '#pix', function(){
		alert("pix");
	});
});

ボタンの位置を移動させても、クリックするとイベントはきちんと動く。