在父文本和子文本内容之间交换文本位置

Question

有人可以分享如何最好只使用 CSS 来解决这个问题的魔术吗？考虑到内容宽度会随着时间的变化而变化，因此绝对定位不是一回事。

<span class='parent'>
<span class='first'>First</span>
Third
<span class='second'>Second</span>
</span>

PS：在 DOM 树中child span移动到更高的位置不是一个可接受的解决方案，因为结构是由 JS 库生成的:)

Answer 1

您可以使用 flexboxorder：

.parent {
display:inline-flex;
}
.parent > * {
margin:0 2px; /*put back the whitespace removed by flex*/
}
.first {
order:-2;
}
.second {
order:-1;
}

<span class='parent'>
<span class='first'>First</span>
Third
<span class='second'>Second</span>
</span>