<main>
  <header>
    A
  </header>
  <section>
    <div class="breadcrumb">
      B
    </div>
    <div class="image">
      C
    </div>
    <div class="main-content">
      D
    </div>
    <aside>
      E
    </aside>
  </section>
</main>
main {
  display: grid;
  width: auto;
  grid-template-rows: 100px auto;
  margin: 0 auto;
  font-size: 24px;
  color: white;
}

header {
  background: #19a8ff;
  margin-bottom: 10px;
  padding: 20px;
}

section {
  background-color: #fd7f18;
  display: grid;
  margin-bottom: 10px;
}

section div {
  padding: 20px;
}

.breadcrumb {
  background-color: #959899;
}

.image {
  order: -1;
}

.main-content {
  background-color: #ecf9ff;
  color: #000;
}

aside {
  padding: 20px;
  background: #42c354;
}

@media (min-width:991px) {
  main {
    width: 1120px;
    grid-template-rows: auto 1fr 220px; 
  }
  
  section {
    grid-template-columns: 1fr 200px;
  }
  
  .breadcrumb {
    grid-column: 1/ -1;
  }
  
  .image {
    order: unset;
  }
  
  aside {
    grid-row: 2 / 4;
    grid-column: 2 / 3;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.