嘿，我来帮你搞定这个Flexbox响应式布局的问题！你的需求很清晰：桌面端让区块1（标题+元数据）和3（摘要）在左侧堆叠，区块2（视频）占满右侧；移动端则三个区块垂直排列。咱们一步步调整你的代码来实现这个效果：

关键调整步骤 #

• 重构HTML结构：把区块1和3包裹在一个左侧容器里，这样它们能作为一个整体和右侧的视频区块并列布局
• 优化Flex容器样式：使用flex属性替代固定width，让布局更灵活；配合媒体查询切换排列方向
• 适配移动端：在小屏幕下让所有区块垂直排列，各自占满100%宽度

完整代码实现 #

CSS 样式 #

/* 主容器基础样式 */
.header-container {
  display: flex;
  gap: 1rem; /* 增加区块间的间距，提升美观度 */
}

/* 左侧容器：包含区块1和3 */
.header-left-container {
  flex: 1 0 30%; /* 桌面端占30%宽度，不收缩 */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 右侧视频容器 */
.header-media-container {
  flex: 1 0 70%; /* 桌面端占70%宽度，不收缩 */
}

/* 子区块样式保持你的原有设置 */
.header-title-container {
  border: 1px solid pink;
}
.header-summary-container {
  border: 1px solid purple;
}
.header-media-container {
  border: 1px solid lavender;
}

/* 移动端适配（屏幕宽度≤768px时） */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
  }
  .header-left-container,
  .header-media-container {
    flex: 1 0 100%; /* 所有区块占满100%宽度 */
  }
}

/* 可选：给视频iframe设置响应式宽度 */
.header-media-container iframe {
  width: 100%;
  height: 300px; /* 可以根据需求调整高度 */
}

HTML 结构 #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 header-container">
  <!-- 新增左侧容器，包裹区块1和3 -->
  <div class="header-left-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-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 hun 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>
  <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>

代码说明 #

• flex: 1 0 30% 是Flexbox的简写属性，分别代表flex-grow: 1（允许分配剩余空间）、flex-shrink: 0（不收缩）、flex-basis: 30%（基础宽度）
• gap 属性用来设置Flex容器内元素的间距，比传统的margin更简洁易维护
• 媒体查询@media (max-width: 768px) 针对移动端调整布局，把主容器的flex-direction改为column，让区块垂直排列
• 给视频iframe设置width: 100%，保证它在容器内自适应宽度

内容的提问来源于stack exchange，提问作者FNads