如何仅使用CSS而不使用flexbox来更改TH中两个跨度的顺序

要仅使用CSS而不使用flexbox来更改TH中两个跨度的顺序，可以使用CSS Grid布局来实现。CSS Grid布局是一种二维网格系统，可以灵活地定义行和列，从而控制元素的布局。

以下是实现的步骤：

在包含TH的父元素上应用CSS Grid布局。可以通过设置父元素的display属性为grid来启用CSS Grid布局。

.parent-element {
  display: grid;
}

定义网格的行和列。使用grid-template-rows和grid-template-columns属性来定义行和列的大小和数量。在这个例子中，我们需要两列，因此可以设置grid-template-columns为auto auto。

.parent-element {
  display: grid;
  grid-template-columns: auto auto;
}

调整TH元素的位置。默认情况下，元素按照它们在HTML中的顺序进行布局。为了更改两个跨度的顺序，可以使用grid-column属性来指定元素所占的列范围。在这个例子中，我们可以将第一个TH元素的grid-column设置为2 / span 1，将第二个TH元素的grid-column设置为1 / span 1。

.parent-element th:nth-child(1) {
  grid-column: 2 / span 1;
}

.parent-element th:nth-child(2) {
  grid-column: 1 / span 1;
}

完整的CSS代码如下：

.parent-element {
  display: grid;
  grid-template-columns: auto auto;
}

.parent-element th:nth-child(1) {
  grid-column: 2 / span 1;
}

.parent-element th:nth-child(2) {
  grid-column: 1 / span 1;
}

这样就可以使用CSS Grid布局来更改TH中两个跨度的顺序，而不使用flexbox。请注意，CSS Grid布局的兼容性较好，但在一些旧版本的浏览器中可能不支持。