<div class="container">

  <div class="custom-panel">
    <div class="panel1 bg-warning">
      Section 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. When an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div class="panel2 bg-danger">
      Section 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book this is some more text to see what effectit has when they aren't the same size and what else can heppan to it.
    </div>
    <div class="panel3 bg-primary">
      Section 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </div>
</div>
.custom-panel {
  display: grid;
  grid-template-areas:
    "p1"
    "p2"
    "p3";
}

@media screen and (min-width: 768px) {
  .custom-panel {
    display: grid;
    grid-template-areas:
      "p1 p3"
      "p2 p3";
  }
  .panel1 {
    grid-area: p1;
  }
  .panel2 {
    grid-area: p3;
  }
  .panel3 {
    grid-area: p2;
  }
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.