Is there a way to ask a browser to render an HTML element after its parent?

Is there a way, using CSS only, to ask a browser to render this

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

as if I had written

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

The reason I want to do this is that I want to dynamically reorder certain spans to render after their parent on mobile devices and inside their parent on wide screens.

A very hacky way to use with caution that works only for your specific case

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

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

<!-- language: lang-html -->

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

<!-- end snippet -->

This is a tad brittle, but could be modified to be less so, like adding a bottom padding area for the p element to make sure there's space for the span:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

p {position: relative;}
span {position: absolute; top: 100%; left: 0;}

<!-- language: lang-html -->

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

<!-- end snippet -->

grid and flex could help here:
the shortest CSS way would be grid +order but, it will pile everything into 3 lines

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.g {
  display: grid;
}

.foo {
  order: 2
}

<!-- language: lang-html -->

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

<!-- end snippet -->
Flex can come along too if only the span has to wrap below the text it stands within.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

p.f {
  display: flex;
  flex-wrap: wrap;
}

p.f .foo {
  order: 2;
  flex-basis: 100%;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

flex and grid can give you a few option to sort out and reorder the text and the tags in between the words.
here is a few more test example to play with :grid makes it easy to display everything in a single column, each words will be on a different row. Flex can give your more options, a column alike grid , but also on a line, where you can send the tags to the front or the end of the container . It is only visual.
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

p {
  border: solid;
  margin: 1em;
}

p.if {
  display: inline-flex;
  flex-wrap: wrap;
}

p.f {
  display: flex;
  flex-wrap: wrap;
}

p.fc {
  display: flex;
  flex-direction: column;
}

p.g {
  display: grid
}

p.ifc {
  display: inline-flex;
  flex-direction: column;
}

p.ig {
  display: inline-grid
}

.f .foo,
.if .foo {
  min-width: 100%;
}

.foo {
  order: 2;
  border: solid;
}

.bar {
  order: -1
}

<!-- language: lang-html -->

<h3>grid blocks</h3>
<h4>flex</h4>
<p class="f">One <span class="foo">Two</span> Three <span class="bar">- </span></p>
<p class="fc">One <span class="foo">Two</span> Three <span class="bar">- </span></p>
<h4>grid</h4>
<p class="g">One <span class="foo">Two</span> Three <span class="bar">- </span></p>
<h3>inline grid blocks</h3>
<h4>inline-flex</h4>
<p class="if">One <span class="foo">Two</span> Three <span class="bar">- </span></p>
<p class="ifc">One <span class="foo">Two</span> Three <span class="bar">- </span></p>
<h4>inline-grid</h4>
<p class="ig">One <span class="foo">Two</span> Three <span class="bar">- </span></p>

<!-- end snippet -->