css - 尝试使用 Flexbox 将一列拆分为多行来实现多列布局

Question

我想寻求一些帮助，如何使用 Flexbox 实现此目的。

 Desktop View
|----------------------------------------------------------------------|
|                                       |                              |
|                   1                   |                              |
|                                       |               2              |
|---------------------------------------|                              |
|                                       |                              |
|                   3                   |                              |
|                                       |                              |
|----------------------------------------------------------------------|

Mobile View
|---------------------------------------|
|                                       |
|                   1                   |
|                                       |
|---------------------------------------|
|                                       |
|                   2                   |
|                                       |
|---------------------------------------|
|                                       |
|                   3                   |
|                                       |
|---------------------------------------|

My attempt is this so far.

.header-container {
  display: flex;
  flex-wrap: wrap;
}

.header-title-container {
  border: 1px solid pink;
  width: 70%;
}

.header-media-container {
  border: 1px solid lavender;
  width: 30%
}

.header-summary-container {
  border: 1px solid purple;
  width: 70%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 header-container">
  <div class="header-title-container">
    <h4 class="header-title">De Pensioenovereenkomst voor Zelfstandigen (POZ), iets voor jou?</h4>
    <div class="header-meta mt-3 mb-3">
      <a class="article-category" href="#">Video</a> - <span class="article-date">17/03/2020</span>
    </div>
  </div>
  <div class="header-media-container">
    <iframe src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  <div class="header-summary-container">
    <p class="header-summary">We horen het nog al te vaak: zelfstandigen zijn bang voor hun oude dag. Ze maken zich vaak zorgen over hund pensioen en hoe dit hun levenskwaliteit kan beinvloeden. Klinkt logisch, maar we merken dat veel zelfstandigen de nodige stappen nemen om het heft in eigen handen te nemen. Je hoeft geen genoegen te nemen met een onvolledig pensioen.Door het nu doordacht aan te pakken creeer je financiale zekerheid voor morgen. Een van de mogelijkheden? De Pensioenovereenkomst voor Zelfstandigen (POZ).</p>
  </div>
</div>

Answer 1

如果您无法设置行的高度，网格可以在这里为您提供帮助。

您可以在媒体查询中创建自定义类，因为 bs4 不支持 display:grid还没有。

可能的测试示例:

/* update with custom class */
@media screen and (min-width: 768px) {
  .d-lg-grid {
    display: grid;
    grid-template-columns: 70% 1fr;
  }
  .header-media-container {
    grid-column: 2;
    grid-row: 1/3;
  }
}

/* your test css */
.header-title-container {
  border: 1px solid pink;
}

.header-media-container {
  border: 1px solid lavender;
}

.header-summary-container {
  border: 1px solid purple;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 header-container  d-lg-grid">
  <div class="header-title-container">
    <h4 class="header-title">De Pensioenovereenkomst voor Zelfstandigen (POZ), iets voor jou?</h4>
    <div class="header-meta mt-3 mb-3">
      <a class="article-category" href="#">Video</a> - <span class="article-date">17/03/2020</span>
    </div>
  </div>
  <div class="header-media-container">
    <iframe src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  <div class="header-summary-container">
    <p class="header-summary">We horen het nog al te vaak: zelfstandigen zijn bang voor hun oude dag. Ze maken zich vaak zorgen over hund pensioen en hoe dit hun levenskwaliteit kan beinvloeden. Klinkt logisch, maar we merken dat veel zelfstandigen de nodige stappen nemen om het heft in eigen handen te nemen. Je hoeft geen genoegen te nemen met een onvolledig pensioen.Door het nu doordacht aan te pakken creeer je financiale zekerheid voor morgen. Een van de mogelijkheden? De Pensioenovereenkomst voor Zelfstandigen (POZ).</p>
  </div>
</div>