使用Flex和CSS网格进行响应式布局

Question

我正在尝试进行响应式布局，我对CSS不好，所以我需要帮助。

代码如下：

.container {
  outline: 1px solid black;
  max-width: 490px;
  margin: 0 auto;
}
.columns {
  outline: 1px solid black;
  display: inline-flex;
  flex-wrap: wrap;
}
.map {
  background-color: cyan;
  width: 150px;
  min-width: 150px;
  height: 150px;
  min-height: 150px;
  margin-right: 20px;
}
.content {
  outline: 1px solid black;
  background-color: lightgray;
  max-width: 320px;
}

.cards {
  outline: 1px solid black;
  display: inline-flex;
  flex-wrap: wrap;
}
.card {
  background-color: pink;
  outline: 1px solid black;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.card.left {
  margin-right: 20px;
}

.texts {
  outline: 1px solid black;
  display: inline-flex;
  flex-wrap: wrap;
}
.text {
  background-color: gold;
  outline: 1px solid black;
  width: 150px;
  height: 200px;
  display: inline-block;
}
.text.left {
  margin-right: 20px;
}

<div class="container">
  <div class="columns">
    <div class="map"></div>
    <div class="content">
      <div class="cards">
        <div class="card left">card #1</div>
        <div class="card">card #2</div>
        <div class="card left">card #3</div>
        <div class="card">card #4</div>
      </div>
      
      <div class="texts">
        <div class="text left">text #1</div>
        <div class="text">text #2</div>
      </div>
    </div>
  </div>
</div>

基本上有两行。 第一个包含一个宽度和高度固定的元素，在右边的四张卡上。 第二行仅包含两个元素。 此布局的每个元素的宽度均为150px。

上面显示的代码部分起作用。 第一行可以，第二行则可以，因为金元素应与卡对齐，因此当卡位于el1的右侧时，内容应位于卡下方。 就像是否有一个隐藏元素（在内容的左侧）具有与el1相同的大小。

我还希望所有内容始终居中，因为现在只有窗口宽度> 490px时才可以。

这就是我想要的：

我该怎么做？