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

Question

可以请人分享魔术技巧，最好仅使用CSS来解决此问题。考虑到内容宽度会随着时间变化，因此绝对定位不是问题。

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

P.S：在DOM树中将child span移到更高位置是不可接受的解决方案，因为该结构是由JS库生成的:)

Answer 1

您可以使用flexbox的order：

.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>