Reply To: Responsive 1-2-3 column flexbox layout?

[Paulie_D]

How it works is you wrap elements as you normally would but by setting display:contents on that wrapper (as and when required) it’s as though the wrapper did not exist.

So for your required “medium” layout we could wrap the two asides into a single div but have that wrapper not be effective for various viewport widths.

You central section really needs to be this HTML (excluding the header and footer) given the current state of flexbox

<main>
  <div class="asidewrap">
    <aside></aside>
    <aside></aside>
  </div>
  <div class="content"></div>
</main>

Now obviously this won’t work for the other layout so with those we can/could apply display:contents to the .asidewrap div and it would be as though the HTML would be

<main>
    <aside></aside>
    <aside></aside>
  <div class="content"></div>
</main>

Then we just order the divs as we want.

Alas…we’re not there yet.