Javascript 根据屏幕宽度交换div位置

我正试图创建一个响应网站，并希望两个div的交换位置取决于屏幕宽度（开始时和调整大小时）

我做了一些研究，尝试了一些选择，但没有运气。我是JQuery和JS的新手，因此非常感谢您的帮助

html

facebook

jquery

$(document).ready(function(){
div1 = $('#div1');
div2 = $('#div2');
tdiv1 = div1.clone();
tdiv2 = div2.clone();
.resize()
});

$(window).resize(function() { //Fires when window is resized
    if($(window).width() < 800){
    div1.replaceWith(tdiv2);
    div2.replaceWith(tdiv1);}
    else{
    div1.replaceWith(tdiv1);
    div2.replaceWith(tdiv2);}  
    });

$（文档）.ready（函数（）{
div1=$（“#div1”）；
div2=$（“#div2”）；
tdiv1=div1.clone（）；
tdiv2=div2.clone（）；
.resize（）
});
$（窗口）.resize（函数（）{//在调整窗口大小时激发
如果（$（窗口）.width（）<800）{
第1部分：替换为（tdiv2）；
div2.替换为（tdiv1）；}
否则{
第1部分：替换为（tdiv1）；
div2.替换为（tdiv2）；}
});

实现这一点的最简单方法是将其放入包装器中，然后

append（）

和

prepend（）

包装器中的div：

HTML

<div class="wrapper">
  <div id="div1">facebook</div>
  <br/>
  <div id="div2">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY" />
  </div>
</div>

脸谱网

Jquery

$(window).on('load resize', function() { //Fires when window is loaded or resized
  var div1 = $('#div1');
  var div2 = $('#div2');
  var wrapper = $('.wrapper');

  if ($(window).width() < 800) {
    wrapper.prepend(div1).append(div2); // move div 1 to start & div2 to end
  } else {
    wrapper.prepend(div2).append(div1); // move div 2 to start & div 1 to end
  }
});

$（窗口）.on（'load resize'，函数（）{//在加载或调整窗口大小时激发
var div1=$（“#div1”）；
var div2=$（“#div2”）；
var wrapper=$（'.wrapper'）；
如果（$（窗口）.width（）<800）{
wrapper.prepend（div1.append（div2）；//将div1移动到start，将div2移动到end
}否则{
wrapper.prepend（div2.append（div1）；//将div2移动到start，将div1移动到end
}
});

---

如果你想用另一种方式写：

$（窗口）.on（'load resize'，函数（）{//在加载或调整窗口大小时激发
var windowWidth=$（window）.width（），
div1=$（“#div1”），
div2=$（“#div2”），
第一个=窗宽<800？第1部分：第2部分，
最后一个=窗口宽度>=800？div2:div1；
$（'.wrapper'）.prepend（第一个）.append（最后一个）；
});

试试这个：

<script type="text/javascript">

    var run = false;

    $(window).on("resize",function(){

        if($(window).width()<800 && !run) {

            $("#div2").remove();

            $('<div id=div2><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY"/></div>').insertBefore($("#div1"));

            run = !run;

        }

        else if($(window).width() >= 800 && run){

            $("#div1").remove();

            $('<div id=div1>facebook</div>').insertBefore($("#div2"));

            run = !run;

        }
    })
</script>

var-run=false；
$（窗口）.on（“调整大小”，函数（）{
如果（$（窗口）.width（）=800&&run）{
$（“#div1”）.remove（）；
$（'facebook'）.insertBefore（$（“#div2”）；
跑=！跑；
}
})

最终代码：

注意：如果要运行代码段，请单击“完整页面”

脸谱网


var-run=false；
$（窗口）.on（“调整大小”，函数（）{
如果（$（窗口）.width（）=800&&run）{
$（“#div1”）.remove（）；
$（'facebook'）.insertBefore（$（“#div2”）；
跑=！跑；
}
})

$(window).on('load resize', function() { //Fires when window is loaded or resized
  var windowWidth = $(window).width(),
      div1 = $('#div1'),
      div2 = $('#div2'),
      first = windowWidth < 800 ? div1 : div2,
      last = windowWidth >= 800 ? div2 : div1;

      $('.wrapper').prepend(first).append(last); 
});

<script type="text/javascript">

    var run = false;

    $(window).on("resize",function(){

        if($(window).width()<800 && !run) {

            $("#div2").remove();

            $('<div id=div2><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSFjZm7TgmvK8lEfSkzytyCuE1ZDE1WdexDyj7eRLSPHfexJQruR8uIGfY"/></div>').insertBefore($("#div1"));

            run = !run;

        }

        else if($(window).width() >= 800 && run){

            $("#div1").remove();

            $('<div id=div1>facebook</div>').insertBefore($("#div2"));

            run = !run;

        }
    })
</script>