如何从侧边栏中分离元素并插入其他位置？

Question

我使用此代码段从侧边栏中删除内容，然后在我的标题中添加：

$(document).ready(function(){
  $(window).resize(function(){
  if($(window).width() < 1000 ){
    $(".red").detach().insertBefore(".blue");
  }
  else{
		 $("#mobile_sidebar").detach().insertAfter("div#templatic_text-16"); 
  }
    	});
});

.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就可以了。但是我再次增加了屏幕的大小，侧栏的内容没有恢复正常。

我能做些什么吗？

Answer 1

这应该有效

＆＃13;

＆＃13;

$(document).ready(function(){
  $(window).on('resize', function(event){
    if($(window).width() < 1000 ){
      $(".red").detach().insertBefore(".blue");
    }
    else{
       $(".red").detach().insertBefore(".green"); 
    }
  });
});

＆＃13;

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

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我认为这是javascript被应用的以下html：

<div id="mobile_sidebar">Hello</div>
<!-- some html -->
<div class="home_page_banner">Java</div>
<!-- some html -->
<div id="templatic_text-16"></div>

然后您应该尝试将div#templatic_text-16与#templatic_text-16更改为此javascript：

$(window).resize(function(){
    if ($(window).width() < 600){
    console.log("small");
        $("#mobile_sidebar").detach().insertBefore(".home_page_banner"); 
    }
    else{
    console.log("big");
        $("#mobile_sidebar").detach().insertAfter("#templatic_text-16"); 
    }
});