Универсальная верстка для sidebar-content-sidebar?

Question

[Александр]

Всем привет!
Есть html:

<div content><main></main></div>
<aside main></aside>
<aside alt></aside>

Это контент и 2 сайдбара.
Они обязательно в таком порядке, нельзя content в центр или конец.

Какие универсальные классы можно придумать, чтобы можно было реализовать схему:
Сайдбар-контент-сайдбар
Спасибо!

Answer 1

[Сергей delphinpro]

Заворачиваем все в контейнер и делаем что хотим

<div class="layout">
  <main class="layout__main"></main>
  <aside class="layout__aside1"></aside>
  <aside class="layout__aside2"></aside>
</div>

.layout {
  display: flex;

  &__main   { order: 2; width: auto;  flex: 1 0 auto; }
  &__aside1 { order: 1; width: 300px; flex: 0 0 auto; }
  &__aside2 { order: 3; width: 200px; flex: 0 0 auto; }
}

Меняя order, меняем порядок

Comments

[Александр]

Сергей delphinpro используя ваш код на флексах, с какими устройствами/браузерами будут проблемы? Я видел caniuse, но не до конца понимаю... Например ie11 на win7 правильно поймет этот код? А iphone 4? Как поведет себя сайт в древнем браузере? Я спрашиваю потому что думал что решение будет через float...
Спасибо!

[Сергей delphinpro]

Александр, с префиксами и в IE10 будет работать. Айфон — мобильный девайс, ему не нужна колоночная раскладка, тупо оставляем всё в столбик.