要素の順序をHTMLまたはCSSで決定する必要がありますか？

Question

私が持っているもの：

は、私は2つのasidesに続く主要コンテンツ領域を持っている：

<style> 
#primary,#secondary,#tertiary{float:left; width:33%;} 
</style> 

<div id="content" class="site-content"> 
    <div id="primary" class="content-area">Primary</div> 
    <aside id="secondary" class="widget-area" role="complementary">Secondary</aside>  
    <aside id="tertiary" class="widget-area" role="complementary">Tertiary</aside> 
</div> 

私は必要なもの：

私は主要コンテンツ領域の各辺に<aside>をしたいです。例えば。 2つのサイドバー、左に1つ、右に1つ。私が試した何

：

は単に#primary前#secondaryを配置することによって、私のHTMLコードを変更するには、意味的に間違って感じている：

<style> 
#primary,#secondary,#tertiary{float:left; width:33%;} 
</style> 

<div id="content" class="site-content"> 
    <aside id="secondary" class="widget-area" role="complementary">Secondary</aside>  
    <div id="primary" class="content-area">Primary</div> 
    <aside id="tertiary" class="widget-area" role="complementary">Tertiary</aside> 
</div> 

私はCSSフロートを使用して試みたが、私は必要な順序を生成することはできません#secondary,#primaryおよび#tertiary。

私の質問：

CSS場合、私はどのように私は、並べ替えかもしれませんが、HTMLやCSSを使用して、私の要素の順序を変更し、必要がありますか？

https://jsfiddle.net/zLpr8v16/

Answer 1

あなたは「フレックス」と「注文」を行うことができます。このフィドルをチェックしてください。 https://jsfiddle.net/zLpr8v16/2/

#content{display:flex;} 
#primary{order:2; flex:1 0 0;} 
#secondary{order:1; flex:1 0 0;} 
#tertiary{order:3; flex:1 0 0;} 

Answer 2

それは本当にちょうどあなたの好み次第だろう。私はCSSルートがもう少しエレガントだと感じています。 Fiddle：あなたは、見てください

応じ relativeポジショニングを使用して leftと right位置を調整することによって、これを達成することができます。もちろん、必要に応じて幅やその他の値を調整することができます。