Variant of flexbox layout, perversion or "normal"?

Question

css

Hello!
There is a layout jsfiddle.net/96zfsobp/
- Header (height is known)
- Three columns (left and right fixed width, central fluid)
- Footer (height is known, sticky footer)
In order to facilitate the future responsive, I want to use a simple block structure:

<div class="row">
  <div class="col">
    header
  </div>
  <div class="col">
    side left
  </div>
  <div class="col">
    content
  </div>
  <div class="col">
    side right
  </div>
  <div class="col">
    footer
  </div>
</div>

Please indicate to the beginner the obvious flaws, can it be simplified?

Answer 1

You can, of course - header and footer are usually located directly in the body
(header, section, footer, ... tags appeared in HTML5, google it)

<header>
    header
</header>
<section class="row">
    <div class="col col-left"></div>
    <div class="col"></div>
    <div class="col col-right"></div>
</section>
<footer>
    footer
</footer>