html - 元素顺序应该由 HTML 还是 CSS 决定？

Question

我有什么:

我有一个主要内容区域，后面跟着两个旁白:

<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>到主要内容区域的每一侧。例如。两个侧边栏，一个在左边，一个在右边。

我尝试过的:

通过放置 #secondary 简单地修改我的 HTML 代码之前 #primary感觉语义不正确:

<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 float ，但无法生成所需的顺序 #secondary , #primary和 #tertiary .

我的问题:

我应该使用 HTML 还是 CSS 修改元素的顺序，如果是 CSS，我该如何重新排序？

https://jsfiddle.net/zLpr8v16/

Answer 1

您可以使用“flex”和“order”。检查这个 fiddle ； 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;}