求助：屏幕≤640px时用JS将social元素移至top-bar-section的ul下方

优先用CSS方案，不需要JS就能实现，实在不行再用JS调整DOM结构：

方案一：CSS Flex布局（结构允许时首选） #

如果.social本来就在.top-bar-section容器内部，直接通过flex的order属性调整顺序：

@media screen and (max-width: 640px) {
  .top-bar-section {
    display: flex;
    flex-direction: column;
  }
  .top-bar-section ul {
    order: 1; /* 让ul排在前面 */
  }
  .top-bar-section .social {
    order: 2; /* 让social紧跟ul之后 */
  }
}

如果.social不在.top-bar-section里，可尝试绝对定位（注意容器要设相对定位）：

@media screen and (max-width: 640px) {
  .top-bar-section {
    position: relative;
    /* 给容器加底部内边距，避免.social覆盖下方内容 */
    padding-bottom: 80px; /* 替换成你的.social实际高度 */
  }
  .social {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0; /* 清除原有外边距 */
  }
}

方案二：JS动态调整DOM结构（CSS无法解决时用） #

如果CMS生成的DOM结构固定，.social不在.top-bar-section里，只能通过JS移动元素。注意要处理屏幕resize的回退逻辑：

// 定义移动元素的函数
function adjustSocialPosition() {
  const isMobile = window.innerWidth <= 640;
  const social = document.querySelector('.social');
  const topBarUl = document.querySelector('.top-bar-section ul');
  
  // 找不到元素直接返回，避免报错
  if (!social || !topBarUl) return;

  // 记录原父元素（需要替换成你实际的原父容器选择器，比如.header）
  const originalParent = document.querySelector('.header');

  if (isMobile) {
    // 检查social是否已经在ul后面，防止重复移动
    if (topBarUl.nextElementSibling !== social) {
      topBarUl.parentElement.insertBefore(social, topBarUl.nextSibling);
    }
  } else {
    // 屏幕变大时移回原位置
    if (social.parentElement !== originalParent) {
      originalParent.appendChild(social);
    }
  }
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', adjustSocialPosition);
// 窗口大小变化时重新调整
window.addEventListener('resize', adjustSocialPosition);

如果你的汉堡菜单是点击后才生成ul的，还要给汉堡菜单的点击事件加监听，在菜单展开后调用adjustSocialPosition()。

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