不修改HTML时能否仅通过CSS调整行内元素的显示顺序

仅使用CSS完全可以实现行内元素的显示顺序调整，你提到的flex/grid方案也适用，不存在仅支持块级元素的限制。

实现原理 #

flex/grid布局的顺序调整能力作用于「容器的直接子项」，和子项原本的display类型无关：你只需要把两个行内span的父元素h1设置为flex容器，两个span就会自动变为弹性子项，直接使用order属性就能调整顺序，不需要修改任何HTML代码。

具体实现代码 #

你只需要在原有CSS基础上新增以下内容即可：

/* 将第一个h1设为flex容器 */
h1:first-of-type {
  display: flex;
  gap: 4px; /* 可选，控制两个span之间的间距，和原有行内间距表现一致 */
  flex-wrap: wrap; /* 可选，保留原有自动换行特性 */
}
/* 调整两个span的顺序，order数值越小排列越靠前，默认值为0 */
h1:first-of-type > span {
  order: 2;
}
h1:first-of-type > span.red {
  order: 1;
}

添加后第一个h1内的两个span显示顺序，就会和第二个手动修改了HTML顺序的h1完全一致，无需改动原有HTML结构。

完整可运行示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>行内元素顺序调整</title>
  <style>
    *, *::after, *::before {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    div {
      max-width: 300px;
      border: 2px solid red;
      margin: 2rem;
      padding: 1rem;
    }
    .red {
      color: red;
    }
    h1:last-of-type {
      margin-top: 3rem;
    }
    span {
      border: 2px solid blue;
    }
    /* 新增调整顺序的代码 */
    h1:first-of-type {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    h1:first-of-type > span {
      order: 2;
    }
    h1:first-of-type > span.red {
      order: 1;
    }
  </style>
</head>
<body>
  <div>
    <h1>
      <span>Lorem ipsum sit dolores</span>
      <span class='red'>EKP itd.</span>
    </h1>
    <!-- 无需修改HTML即可实现和下方一致的效果 -->
    <h1>
      <span class='red'>EKP itd.</span>
      <span>Lorem ipsum sit dolores</span>
    </h1>
  </div>
</body>
</html>

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