css - CSS: 要素を移動し、HTML 内の位置をオーバーライドします

Question

次の HTML ページがあるとします。

<body>
<p id="alice">Alice</p>
<p id="bob">Bob</p>
</body>

そして、これは CSS 構文のふりをします:

p#alice:before { p#bob }

つまり、CSS を使用して HTML をオーバーライドし、Bob 要素を Alice 要素の上に配置します。なんで？私の場合、CSS は編集できますが、HTML は編集できません。

Bob は実際に DOM で Alice の前に出現する必要はありませんが、視覚的に Alice の上に表示される必要があります。

score 5 · Accepted Answer

完全に柔軟な純粋な CSS でこれを行う唯一の方法は、フレックスボックスを使用することです。

http://jsfiddle.net/S9L3r/ (プレフィックスは含まれていません)

body {
    display: flex;
    flex-flow: column nowrap;
}

#alice {
    order: 2;
}

score 2 · Accepted Answer

コードを追加できる場合は、いつでも jQuery を使用してこれを行うことができます。

$('#bob').insertBefore('#alice');

3 に答える 3