使用jQuery调整浏览器大小时删除附加的项目

Question

我是jQuery的新手，并试图在浏览器调整大小时添加一些项，这最初会改变它们在DOM中的位置，比如根据响应式设计要求向上或向下移动它们的元素。当我像< 767px一样缩小浏览器时，元素会附加，或者说改变它们的位置，但是我面临的问题是在浏览器放大时将元素恢复到它的原始位置和样式，比如> 768px，或者说撤消我在< 767px上做的附加。我正在使用下面的代码。提前谢谢。

$(document).ready(function(){
 jQuery(window).resize(function(){
 var wwindow = jQuery(window).width();
  if (wwindow < 767) {
          $( ".contact" ).after( $( ".social" ) );
          $( ".strip-right" ).prepend( $( ".ingrese" ) );
          $( ".strip-right" ).prepend( $( ".news" ) );
          $( ".contact-info .box .col3" ).after( $( ".contact-info .box .col1" ) );  
          $( ".property-list .common h4 span" ).prepend( "/&nbsp;" ); 
          $( ".clients" ).after( $( ".content-box .col2" ) );
          $( ".banner" ).before( $( ".caption2" ) ); 
          $( ".banner" ).before( $( ".caption2" ) );
          $( ".caption2 .row" ).before( $( ".caption2 .txtb h3 strong" ) );
          $( ".caption2 > strong" ).append( $( ".ref" ) );
          $( ".caption2 > strong > span" ).prepend( "|&nbsp;" );
  }
  if (wwindow > 768) {
          $( ".social" ).remove();
          $( ".ingrese" ).remove();
          $( ".news" ).remove();
          $( ".contact-info .box .col1" ).remove();
          $( "/&nbsp;" ).remove();
          $( ".content-box .col2" ).remove();
          $( ".caption2" ).remove();
  }
 });
});

Answer 1

@media screen and (max-width: 768px) {
    .social,.ingrese,.news,.contact-info .box .col1,.content-box .col2,.caption2{
        display: none;
    }
}

@ media标签由bootstrap类框架使用，该框架以其响应性设计而闻名。你可以像上面那样通过添加元素来隐藏它们，当你的浏览器达到768的最大宽度时，它会应用添加到@media标签中的css

Answer 2

我使用下面的代码来刷新超过768px的页面，这似乎可以工作，但在调整大小后需要1到2秒来刷新页面。

$(window).resize( function() {
window.location.href = window.location.href;
});