<div class="container">
    <div class="item item1">
      <p>I'm Sidebar #1</p>
    </div>
    <div class="item item2">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.</p>
      <p>Lorem ipsum d</p>
    </div>
    <div class="item item3">
      <p>I'm Sidebar #2</p>
    </div>
    <div class="item footer">
      <p>I'm the footer</p>
    </div>
  </div>
:root {
  --yellow: #ffc600;
}

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-areas:
    'sidebar-1 content sidebar-2'
    'footer    footer  footer'
}

@media (max-width: 700px) {
  .container {
  grid-template-areas:
    'sidebar-1 content content'
    'sidebar-2 sidebar-2 sidebar-2'
    'footer    footer  footer'  
  }
}

.item {
  display: grid;
  justify-content: center;
  align-items: center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background-color: var(--yellow);
}

.item p {
  margin: 0 0 5px 0;
}

.item1 {
  grid-area: sidebar-1
}

.item2 {
  grid-area: content
}

.item3 {
  grid-area: sidebar-2
}

.footer {
  grid-area: footer
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.