如何使用JavaScript或jQuery仅在移动端对li元素进行重排序

你可以选择更轻量化的CSS方案，或灵活性更高的JS/jQuery方案实现需求：

方案1：纯CSS实现（更推荐，性能最优） #

不需要写JS，利用Flex布局的order属性配合响应式媒体查询即可实现，仅在移动端生效：

/* 匹配移动端，可根据实际需求调整断点数值 */
@media (max-width: 767px) {
  .kt-tabs-title-list {
    display: flex;
    flex-wrap: wrap;
  }
  /* 将需要提前的标签order设置为小于默认值0，就会排在最前面 */
  #tab-bestsellers {
    order: -2;
  }
  #tab-onsales {
    order: -1;
  }
}

桌面端断点以上的设备不会触发上述样式，标签顺序保持原有状态。

方案2：JS/jQuery实现 #

如果需要更复杂的动态排序逻辑，可以用JS实现，会自动判断设备/窗口尺寸动态调整顺序：

// 定义移动端判断规则
function isMobile() {
  return window.innerWidth < 768;
}
// 存储原始的li顺序，用于桌面端恢复
const $tabList = $('.kt-tabs-title-list');
const originLiList = $tabList.children('li').toArray();

function adjustTabOrder() {
  if (isMobile()) {
    // 移动端将目标标签移到最前面
    const $bestsellers = $('#tab-bestsellers');
    const $onsales = $('#tab-onsales');
    $tabList.prepend($onsales).prepend($bestsellers);
  } else {
    // 桌面端恢复原始顺序
    $tabList.append(originLiList);
  }
}

// 页面加载时执行一次
$(function() {
  adjustTabOrder();
});

// 窗口尺寸变化时重新判断执行
$(window).on('resize', adjustTabOrder);

效果说明 #

• 桌面端（窗口宽度≥768px）：标签顺序保持原有不变
  
• 移动端（窗口宽度<768px）：标签自动调整为目标顺序
  调整前效果：
  
  调整后效果：
  

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