html - 有没有办法要求浏览器在其父元素之后渲染 HTML 元素？

Question

有没有办法仅使用 CSS 来要求浏览器渲染此内容

<p>One <span class="foo">Two</span> Three</p>

就像我写的一样

<p>One Three</p>
<span class="foo">Two</span>

我想要这样做的原因是，我想动态地重新排序某些跨度，以便在移动设备上的父级之后以及宽屏幕上的父级内部进行渲染。

Answer 1

一种非常巧妙的谨慎使用方式，仅适用于您的具体情况

p {
  display: grid;
  grid-auto-flow: dense;
  justify-content: start;
  gap: 5px;
}

.foo {
  grid-row: 2;
  grid-column: span 2;
}

<p>One <span class="foo">Two</span> Three</p>