Если порядок элемента определяется 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> на каждую сторону первичной области содержимого. Например. Две боковые панели, одна слева и одна вправо.

Что я пробовал:

Просто изменив свой HTML код, поместив #secondary перед тем #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 поплавки, но я не могу получить требуемый порядок #secondary, #primary и #tertiary.

Мой вопрос:

Должен ли я изменить порядок моих элементов с помощью HTML или CSS, и если CSS, как я мог бы изменить порядок?

https://jsfiddle.net/zLpr8v16/

Answer 1

вы можете сделать с помощью «flex» и «order». проверьте эту скрипку; 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 немного шире. Вы могли бы добиться этого с помощью relative позиционирования и регулировки left и right позиции соответственно

Взгляните: Fiddle. Конечно, вы можете настроить ширину и все остальное по мере необходимости.