如何在CSS中构建一个两列相邻的简单的折叠布局？

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

.container {
  display: flex;
}

.column {
  flex: 1;
  border: 1px solid #000;
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.column {
  border: 1px solid #000;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}