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

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

您可以使用order flex 盒:

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