如何在小尺寸屏幕下调整CSS Grid布局内元素的视觉展示顺序

CSS 实现方案 #

CSS Grid 原生支持order属性，可直接调整元素视觉排序，所有网格元素默认order值为0，值越小排列越靠前，同值元素按DOM原生顺序排列。
你只需要在原有CSS基础上新增小屏幕媒体查询即可实现需求，断点可匹配你原有Grid布局的单列触发阈值600px：

@media (max-width: 600px) {
  /* 第三个元素调整order为1 */
  li:nth-child(3) {
    order: 1;
  }
  /* 第五个及之后的元素也设为order为1，和第三个元素同组按DOM顺序排列 */
  li:nth-child(n+5) {
    order: 1;
  }
}

你原有代码中的grid-auto-flow: dense配置无需修改，可和order属性兼容生效。

注意：order仅修改视觉展示顺序，不会改变键盘Tab导航、屏幕阅读器的读取顺序，符合你当前面向明眼用户的开发需求。

DOM 实现方案 #

如果后续需要优化无障碍体验，可以通过JavaScript动态调整DOM顺序，示例代码如下：

const breakpoint = 600;
const list = document.querySelector('ul');
const thirdItem = document.querySelector('li:nth-child(3)');
const featureItem = document.querySelector('#feature');

function adjustDomOrder() {
  const isSmallScreen = window.innerWidth <= breakpoint;
  if (isSmallScreen) {
    // 小屏将feature元素插入到第三个元素之前
    list.insertBefore(featureItem, thirdItem);
  } else {
    // 大屏恢复原生DOM顺序
    list.insertBefore(featureItem, thirdItem.nextElementSibling);
  }
}

// 页面加载时执行一次
adjustDomOrder();
// 监听窗口尺寸变化自动调整
window.addEventListener('resize', adjustDomOrder);

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