如何重排表格td/th：使testing类列移动端为第一列、桌面端为最后一列

共有两种稳定可落地的方案，按需选择即可： #

方案一：纯CSS实现（优先推荐，无JS依赖） #

通过修改表格行的布局模型，结合CSS order属性和媒体查询实现列顺序调整，不需要改动原有HTML结构：

/* 重置表格默认布局，改用弹性盒模型控制列排布 */
.table tr {
  display: flex;
  width: 100%;
}
.table th,
.table td {
  flex: 1;
  /* 以下样式按需和你原有表格的视觉规范对齐即可 */
  padding: .75rem;
  border: 1px solid #dee2e6;
}

/* 桌面端（断点可根据项目实际规范调整，示例以768px为界） */
@media (min-width: 768px) {
  .testing {
    /* 给大于总列数的order值即可，当前表格共4列，设5就可排到最后 */
    order: 5;
  }
}

/* 移动端 */
@media (max-width: 767px) {
  .testing {
    /* 负数order值会排在默认order=0的所有列最前面 */
    order: -1;
  }
}

注意事项：如果需要保留某列固定宽度（比如序号列），可以单独给对应列设置flex: 0 0 固定宽度值;即可，不影响顺序逻辑。 #

方案二：JS动态调整DOM（适合需要保留原生表格特性的场景） #

如果你需要用到原生表格的列宽自适应、单元格合并等默认特性，不希望修改表格的display属性，可以通过JS在视口尺寸变化时动态移动对应单元格的位置：

// 调整列顺序的核心逻辑
function reorderTestingColumn() {
  const isMobile = window.innerWidth < 768;
  document.querySelectorAll('.table tr').forEach(row => {
    const targetCell = row.querySelector('.testing');
    if (!targetCell) return;
    if (isMobile) {
      // 移动端插入到行首
      row.insertBefore(targetCell, row.firstElementChild);
    } else {
      // 桌面端追加到行尾
      row.appendChild(targetCell);
    }
  });
}

// 页面初始化时执行一次
reorderTestingColumn();
// 监听窗口尺寸变化，建议加防抖优化性能
window.addEventListener('resize', reorderTestingColumn);

提示：如果项目中已有防抖工具，建议给resize事件绑定的函数加100-200ms的防抖，避免频繁触发DOM重排。

你给出的示例表格代码不需要做任何结构修改，直接引入上述任意一种方案的代码即可实现需求。

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