响应式布局下平板/移动端将无序列表首项移至末尾的实现方案

这个效果纯CSS和JavaScript两种方式都可以实现，可以根据业务需求选择对应方案：

方案1：纯CSS实现（仅调整视觉显示顺序） #

利用Flex布局的order属性搭配媒体查询即可实现，不需要写任何脚本，性能最优。
实现代码：

/* 基础列表样式可根据实际需求调整 */
ul {
  margin: 0;
  padding: 0;
  list-style: disc;
}

/* 桌面端（宽度≥768px）保持默认顺序 */
@media (min-width: 768px) {
  li {
    order: initial;
  }
}

/* 平板/移动端（宽度<768px）调整首项到末尾 */
@media (max-width: 767px) {
  ul {
    display: flex;
    flex-direction: column;
  }
  /* 所有li默认order值为0，给首项设为更大的值就会排到最后 */
  li:first-child {
    order: 1;
  }
}

注意：这个方案只会改变元素的视觉渲染顺序，不会修改DOM节点的实际排列顺序。如果场景需要DOM顺序和显示顺序一致（比如适配屏幕阅读器、Tab键导航顺序、依赖DOM顺序的交互逻辑），请选择JS实现方案。

方案2：JavaScript实现（真实修改DOM顺序） #

通过监听视口尺寸变化，在断点切换时真实移动DOM节点，保证DOM顺序和显示效果完全一致。
实现代码：

<ul id="responsiveList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

<script>
const list = document.getElementById('responsiveList');
// 断点阈值可根据设计稿调整，这里以768px为移动端/桌面端分界
const BREAKPOINT = 768;
let currentIsMobile = window.innerWidth < BREAKPOINT;

function updateListOrder() {
  const nextIsMobile = window.innerWidth < BREAKPOINT;
  // 视图模式没变化时不重复操作
  if (nextIsMobile === currentIsMobile) return;

  if (nextIsMobile) {
    // 切换到移动端：把首项移到列表末尾
    list.appendChild(list.firstElementChild);
  } else {
    // 切回桌面端：把之前移到末尾的首项移回顶部
    list.prepend(list.lastElementChild);
  }
  currentIsMobile = nextIsMobile;
}

// 页面初始化时执行一次
updateListOrder();
// 监听窗口尺寸变化，加防抖避免频繁触发DOM操作
let resizeTimer = null;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(updateListOrder, 150);
});
</script>

这个方案的DOM顺序和用户看到的顺序完全一致，无障碍适配性更好，适合对交互逻辑有要求的场景。

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