html - Flex，使用wrap属性阻止

我需要做这样的标记


我正在尝试使用wrap属性，但是无法使其正确。请你帮助我好吗。这是我的小提琴https://jsfiddle.net/armakarma/h4tb7nxy/7/

.block-top_wrapper {
  display: flex;
  align-items: baseline;
  width: 1160px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 auto;
}

.test {
  flex: 1 1 550px;
}

.block-top_trips {
  border: 10px solid #7FCD51;
  box-sizing: border-box;
  padding: 146px 100px;
}

.block-top_peaks {
  padding: 146px 100px;
  height: 700px;
  border: 10px solid #7FCD51;
}

.block-top_review {
  border: 10px solid #7FCD51;
  box-sizing: border-box;
  padding: 146px 100px;
}

.block-top_ancient {
  width: 100%;
  height: 200px;
  border: 10px solid #7FCD51;
}

<div class='block-top_wrapper'>
  <div class='block-top_trips test'>Check out The day trips</div>
  <div class='block-top_peaks test'>5 best peaks of Kazakhstan</div>
  <div class='block-top_review test'>best way</div>
  <div class='block-top_ancient test'>Ancient Kazahstan</div>
</div>

最佳答案

我不确定您的确切要求，但是此设计是否可以完全响应，并且当宽度降至600px以下时，它将切换为垂直对齐。

.flx-wrap {
  padding: 20px 0 0 20px;
}

.flx-row {
  display: flex;
  flex: 1;
}

.flx-col {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.flx-bx {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0 20px 20px 0;
  border: 10px solid #7FCD51;
  padding: 20px;
}

.block-top_trips {
  align-items: center;
  justify-content: center;
}

.block-top_peaks {
  height: 700px;
}

.block-top_ancient {
  height: 200px;
}

@media only screen and (max-width: 600px) {
  .flx-row {
    flex-direction: column;
  }
}

<div class="flx-wrap">
  <div class="flx-row">
    <div class="flx-col">
      <div class="flx-bx block-top_trips">
        <h2>Check out The day trips</h2>
      </div>
      <div class="flx-bx">
        <h4>The best way to see Kazakhstan.</h4>
      </div>
    </div>
    <div class="flx-bx block-top_peaks">
      <h2>5 best peaks of Kazakhstan</h2>
      <p>Pick beautiful mountains.</p>
    </div>
  </div>
  <div class="flx-bx block-top_ancient">
    <h2>Ancient Kazahstan</h2>
    <p>Feel the spirit of ancient Kazahstan.</p>
  </div>
</div>