Flex, используя свойство wrap для блокировки

Question

Мне нужно сделать разметку такого типа

Я пытаюсь поэкспериментировать со свойством обтекания, но не могу сделать это правильно.Не могли бы вы мне помочь.Вот моя скрипка 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>

Answer 1

Я не уверен в ваших точных требованиях, но этот дизайн будет полностью адаптивным и переключится на вертикальное выравнивание, когда ширина упадет ниже 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>

Answer 2

Вы можете использовать код как показано ниже

ПРИМЕЧАНИЕ!

для более быстрого использования %, а не px

html,
body {
  width: 100%;
  height: 100%;
}

.block-top_wrapper {
  display: flex;
  align-items: baseline;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.sub-wrap {
  display: flex;
  width: 100%;
  margin-bottom: 25px;
  height: 700px;
}

.sub-wrap .sub-flex {
  flex: 1 0 45%;
}

.mr {
  margin-right: 15px;
}

.full {
  flex: 0 1 100%;
}

.block-top_peaks {
  border: 10px solid #7FCD51;
}

.block {
  border: 10px solid #7FCD51;
  box-sizing: border-box;
  width: 100%;
  height: 50%;
}

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

<div class='block-top_wrapper'>
  <div class="sub-wrap">
    <div class="sub-flex mr">
      <div class='block-top_trips block'>Check out The day trips</div>
      <div class='block-top_review block'>best way</div>
    </div>
    <div class='block-top_peaks sub-flex'>5 best peaks of Kazakhstan</div>
  </div>
  <div class='block-top_ancient full'>Ancient Kazahstan</div>
</div>