3-х колоночная резиновая верстка (контент должен грузится первым, потом сайдбары)

* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
  padding: 0; 
} 
 
.clr:after { 
  content: ''; 
  display: table; 
  clear: both; 
} 
 
main { 
  max-width: 800px; 
  width: 100%; 
  margin: 0 auto; 
} 
 
header, 
footer { 
  background: #eee; 
} 
 
aside { 
  position: relative; 
  /* Чтоб z-index сработал */ 
  width: 200px; 
  background: #ccc; 
  z-index: 2; 
  /* Чтоб было выделение текста, так как aside будет прятаться под .content, размещенный перед ним */ 
} 
 
.middle { 
  white-space: nowrap; 
  /* Не дает колонкам уходить друг под друга. Однако, работая с меди запросами, нужно будет убрать данный стиль для более низких разрешений, где нужно будет сайдбары переместить вниз. */ 
} 
 
.middle>aside, 
.middle>section { 
  white-space: normal; 
  /* Нормализует перенос строк текста. Без него, весь текст пойдет одной сплошной строкой */ 
} 
 
.content { 
  padding: 0 230px; 
  display: inline-block; 
  /* Задается, чтоб блок расположился между 2 float-ами */ 
  background: #00CC334D; 
} 
 
.left { 
  float: left; 
  margin-right: -200px; 
} 
 
.right { 
  float: right; 
  margin-left: -200px; 
} 
 
@media screen and (max-width:600px) { 
  .middle { 
    white-space: normal; 
  } 
  .content { 
    padding: 0; 
    margin: 0; 
  } 
  aside { 
    width: 50%; 
    margin: 0 !important; 
  } 
} 
 
@media screen and (max-width:420px) { 
  aside { 
    width: 100%; 
    float: none !important; 
  } 
}

<main> 
  <header>Header</header> 
  <section class="middle clr"> 
    <section class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</section> 
    <aside class="left">Left sidebar</aside> 
    <aside class="right">Right sidebar</aside> 
  </section> 
  <footer>Footer</footer> 
</main>