<div class="container">
  <div class="flex"> 
  <div class="flex1">1 Flex</div>
  <div class="flex2"><b>2 Flex</b></div>
  <div class="flex3">3 Flex</div>
</div>
<div class="grid">
  <div class="grid1">1 Grid</div>
  <div class="grid2"><b>2 Grid</b></div>
  <div class="grid3">3 Grid</div>
</div>
</div>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 50px;
  padding: 50px;
  align-items: flex-start;
}
.flex1, .flex2, .flex3,
.grid1, .grid2, .grid3{
  border: 1px solid;
  padding: 10px;
}
.flex3 {
  width: 100%;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: -20px;
}
.grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  grid-gap: 20px;
}
.grid3 {
  grid-column: span 2;
}
.flex1, .flex2, .flex3 {
  margin-bottom: 20px;
}
@media(max-width: 1023px) {
  .grid3 {
    grid-column: initial;
  }
  .grid {
      grid-template-columns: initial;
    justify-content: stretch;
    }
  .flex1, .flex2, .flex3,
  .grid1, .grid2, .grid3 {
    width: 100%;
  }
  .flex2 {
    order: 1;
  }
  .grid2 {
    grid-row: 3;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.