他の要件により HTML を変更できないテンプレートの場合、 HTML 内で順序が異なっているときに、 をdiv別の の上に表示 (並べ替え) するにはどうすればよいでしょうか。両方の には、高さと幅が異なるデータが含まれています。divdiv
<div id="wrapper">
<div id="firstDiv">
Content to be below in this situation
</div>
<div id="secondDiv">
Content to be above in this situation
</div>
</div>
Other elements
望ましい結果が次のものであることは明らかです。
Content to be above in this situation
Content to be below in this situation
Other elements
寸法が固定されている場合は、必要な場所に配置するのは簡単ですが、コンテンツが可変である場合は、いくつかのアイデアが必要です。このシナリオでは、両方の幅が 100% であると見なしてください。
私は特に CSS のみのソリューションを探しています (それがうまくいかない場合は、おそらく他のソリューションも検討する必要があるでしょう)。
これに続く他の要素があります。私が示した限定的なシナリオを考慮すると、良い提案が挙げられました。それが最善の答えである可能性もあるからです。ただし、これに続く要素が影響を受けないようにすることも検討しています。
ベストアンサー1
CSSのみのソリューション（すべての最新ブラウザ) – Flexboxのorderプロパティを使用します:
#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }<div id="flex">
<div id="a">2nd</div>
<div id="b">1st</div>
<div id="c">3rd</div>
</div>より詳しい情報：https://developer.mozilla.org/en-US/docs/Web/CSS/order