如何在不改动HTML/JS的情况下用CSS将第二个span前置？

你遇到的核心问题其实是绝对定位导致元素脱离文档流，加上之前的Flex设置没有完全覆盖原有样式冲突。我们可以通过以下步骤解决，完全符合你的限制条件：

• 第一步：移除.menu-number的position: absolute和width: 100%，让它回到正常文档流里，这样Flex容器能自动计算菜单宽度，不会塌陷。
• 第二步：正确设置<a>标签为Flex容器，然后用order属性调换两个span的显示顺序。
• 第三步：调整padding和布局细节，确保完成状态的背景色不会遮挡文本，同时保持菜单的自适应宽度。

修改后的CSS代码：

/* 重置menu-number的定位，让它回到文档流 */
.menu-number {
  border: none;
  border-left: 10px solid transparent;
  border-radius: 0;
  padding: 13px 0 13px 20px;
  height: 45px;
  /* 移除绝对定位和宽度100%，避免脱离文档流 */
  /* position: absolute; */
  /* width: 100%; */
  text-align: left;
  z-index: 1;
}

/* 设置a标签为Flex容器，这是关键 */
.nav-link > div > a {
  display: flex;
  align-items: center; /* 垂直居中对齐文本 */
  height: 45px; /* 保持容器高度一致 */
  width: 100%; /* 让容器占满父元素宽度 */
}

/* 调换两个span的显示顺序 */
.nav-link > div > a > span:nth-of-type(1) {
  order: 2;
}
.nav-link > div > a > span:nth-of-type(2) {
  order: 1;
  padding-left: 20px; /* 调整文本的左侧间距 */
}

/* 完成状态的样式调整，确保背景色覆盖整个容器 */
.completed-section {
  color: #42bb76 !important;
  border-left: 10px solid #42bb76;
  background-color: #274d56;
  text-decoration: underline;
  /* 给完成状态的span加padding-right，避免文本被遮挡 */
  padding-right: 20px;
}

/* 重置section-name的样式，去掉float和固定padding */
.section-name {
  color: white;
  padding: 0; /* 移除原有padding，由Flex布局控制间距 */
  height: auto; /* 让高度自适应 */
  /* float: left; */ /* 移除浮动，Flex布局不需要 */
}

为什么这个方案可行？ #

1. Flex布局不会导致宽度塌陷：Flex容器会自动根据子元素的内容计算宽度，完美适配你提到的菜单开合状态（JS控制宽度），不需要设置固定宽度。
2. order属性直接调换显示顺序：不需要修改HTML，仅通过CSS就能改变两个span的视觉顺序，而且不会影响文档流的结构（屏幕阅读器仍会按原顺序读取，符合无障碍要求）。
3. 移除绝对定位解决遮挡问题：把.menu-number放回文档流后，它的背景色只会覆盖自身区域，不会遮挡后面的span文本，配合order调换顺序后，section-name会显示在前面。

你之前尝试Flex没生效，大概率是因为.menu-number的绝对定位导致Flex容器无法正确识别子元素的尺寸，只要移除绝对定位，Flex的order属性就能正常工作了。

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