Flex layout

by Sergey Linnick

HTML

<div class="wrapper">
  <aside class="aside aside-1">Aside 1</aside>
  <article class="main">
    Pellentesque habitant morbi tristique senectus et .
  </article>
  <aside class="aside aside-2">Aside 2</aside>
</div>

CSS

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.main {
  background: deepskyblue;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

.aside {
  flex: 1 auto;
}

.main {
  flex: 7 auto;
}

.aside-1 {
  order: 1;
}

.main {
  order: 2;
}

.aside-2 {
  order: 3;
}

.footer {
  order: 4;
}