<nav></nav>
<aside></aside>
<main>
  <header></header>
  <article></article>
  <article></article>
  <article></article>
</main>

body {
  max-width: 1200px;
  padding: 8px;
  margin: 0 auto;
}

nav {
  width: 100%;
  height: 50px;
  background-color: #4282aa;
  margin-bottom: 8px;
}

aside {
  display: none;
}

main {
  width: 100%;
}

header {
  width: 100%;
  height: 200px;
  background-color: #0F1C37;
  margin-bottom: 8px;
}

article {
  width: 100%;
  height: 100px;
  background-color: #7c9a8c;
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  main {
    display: flex;
    flex-wrap: wrap;
  }
  
  header {
    flex: 1 0 100%;
  }
  
  article {
    flex: 1 0 30%;
    margin-right: 8px;
  }
  
  article:last-child {
    margin-right: 0;
  }
}

@media (min-width: 1024px) {
  aside {
    display: block;
    float: left;
    width: calc(30% - 8px);
    background-color: #175873;
    height: 308px;
    margin-right: 8px;
  }
  
  main {
    width: 70%;
    float: left;
  }
}