html - あるテキスト div を、DOM で兄弟として続く別のテキスト div にどのようにラップしますか?

Question

このHTMLがあるとします：

<div id="a">
  a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa
  a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa
  a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa
</div>
<div id="b">
  b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb
</div>

CSS を使用して、以下のような効果が得られるように、div A を div B にラップするにはどうすればよいですか?

私が試したこと、読んだことすべてから見ても、そのようなことが可能かどうかさえ確信が持てません。負のマージンを持つフロートは、ラップする代わりにオーバーラップするだけであり、絶対配置を試みると、div B がフローから除外されるため、そこでもラップされません。

コンテンツが携帯電話やスクリーン リーダーで簡単に表示されるように、div A を div B に兄弟として従わせたいと考えています。そのため、div B は div A の子ではありません。

JavaScript で div B を移動することに頼らずに、効果を達成できる CSS のわずかな手はありますか。私が考えることができる唯一のことは、空の省スペースdivをdiv A内に配置し、div Bをその「上」に再配置することです。それは有効な手法ですか、それとも、さまざまなサイズのブラウザー ビューポートでのトラブルを求めているだけですか?