如何在移动端resize时将子元素移至指定父元素的特定位置？

需求：仅在屏幕宽度小于580px时，将.wrapper中的.bottomExcerpt元素移至.wrapperTwo内，放在.smallhyperlinks之后、.picture之前。现有jQuery代码执行后，.bottomExcerpt出现在.picture下方，需修正。

原始HTML代码 #

<div class="wrapper">
  <div id="wrapperItems" class="container">
    <div class="row belowContent">
      <div class="favoriteContainer"></div>
      <div class="bottomExcerpt">
        <p>HTML links are hyperlinks. You can click on a link and jump to another document.</p>
      </div>
    </div>
  </div>
</div>

<div class="wrapperTwo">
  <div id="wrapperItemsTwo" class="container">
    <div class="row belowContent">
      <div class="picture">
        <div class="symbol"></div>
      </div>
      <div class="smallhyperlinks">
        <h2 class="hidden">H2 Text</h2>
      </div>
    </div>
  </div>
</div>

尝试的jQuery代码 #

$(window).resize(function () {
  if ($(window).width() < 580) 
  {
    $('.wrapperTwo .picture').insertAfter('.wrapperTwo .smallhyperlinks');
    $('.smallhyperlinks h2').removeClass('hidden');
    if ($('.wrapper .bottomExcerpt').length > 0) {
      $('.wrapper .bottomExcerpt').insertAfter('.wrapperTwo .smallhyperlinks');
    }
  } 
  else 
  {
    $('.wrapperTwo .smallhyperlinks').insertAfter('.wrapperTwo .picture');
    $('.smallhyperlinks h2').addClass('hidden'); 
  }
});

问题分析 #

原代码存在两个核心问题：

• 桌面端（宽度≥580px）未将.bottomExcerpt移回原始位置，导致元素位置永久错乱
• 未处理resize事件重复触发引发的多次移动问题，可能导致结构混乱

修正后的jQuery方案 #

// 提前记录.bottomExcerpt的原始父元素和下一个兄弟元素，用于恢复位置
let excerptOriginalParent = $('.wrapper .bottomExcerpt').parent();
let excerptNextSibling = $('.wrapper .bottomExcerpt').next();

// 防抖函数，避免resize频繁触发
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  }
}

$(window).resize(debounce(function () {
  const windowWidth = $(window).width();
  const $bottomExcerpt = $('.bottomExcerpt');
  const $smallHyperlinks = $('.wrapperTwo .smallhyperlinks');
  const $picture = $('.wrapperTwo .picture');

  if (windowWidth < 580) {
    // 显示h2标题
    $smallHyperlinks.find('h2').removeClass('hidden');
    // 将picture移到smallhyperlinks之后
    $picture.insertAfter($smallHyperlinks);
    // 将bottomExcerpt插入到smallhyperlinks之后、picture之前
    $bottomExcerpt.insertAfter($smallHyperlinks);
  } else {
    // 隐藏h2标题
    $smallHyperlinks.find('h2').addClass('hidden');
    // 将smallhyperlinks移回picture之后
    $smallHyperlinks.insertAfter($picture);
    // 将bottomExcerpt移回原始位置
    if (excerptNextSibling.length) {
      $bottomExcerpt.insertBefore(excerptNextSibling);
    } else {
      excerptOriginalParent.append($bottomExcerpt);
    }
  }
}, 250));

// 页面加载时主动触发resize，确保初始布局正确
$(window).trigger('resize');

修正说明 #

• 记录原始位置：提前保存.bottomExcerpt的父元素和下一个兄弟元素，保证桌面端能准确恢复位置
• 防抖优化：减少resize事件触发频率，避免重复移动元素导致的结构混乱
• 明确插入顺序：移动端先将picture移到smallhyperlinks后，再插入bottomExcerpt，确保它处于两者之间
• 初始触发：页面加载时执行一次resize，保证初始布局符合当前窗口尺寸

纯CSS替代方案（无需DOM移动） #

如果仅需调整视觉顺序，不需要真正移动DOM结构，可以用Flexbox的order属性实现：

/* 桌面端（宽度≥580px） */
@media (min-width: 580px) {
  .wrapperTwo .row.belowContent {
    display: flex;
    flex-direction: row-reverse;
  }
  .smallhyperlinks h2.hidden {
    display: none;
  }
  .wrapperTwo .bottomExcerpt {
    display: none; /* 隐藏wrapperTwo中的副本 */
  }
}

/* 移动端（宽度<580px） */
@media (max-width: 579px) {
  .wrapperTwo .row.belowContent {
    display: flex;
    flex-direction: column;
  }
  .smallhyperlinks {
    order: 1;
  }
  .bottomExcerpt {
    order: 2;
  }
  .picture {
    order: 3;
  }
  .smallhyperlinks h2.hidden {
    display: block;
  }
  .wrapper .bottomExcerpt {
    display: none; /* 隐藏原位置的元素 */
  }
}

说明 #

需要先将.bottomExcerpt复制一份到.wrapperTwo的.row.belowContent中，通过CSS在不同断点控制显示/隐藏和顺序，实现视觉上的迁移效果，无需JS介入。

内容的提问来源于stack exchange，提问作者user27817190