html - 使两个 div 响应 - 在大屏幕上并排，在移动设备上彼此下方

Question

我试图让这两个 div 很好地协同工作，但它不起作用。我已经关闭了大屏幕 View ，但无论我做什么，div 都不会在小屏幕(移动设备)上正确地堆叠在一起。目前，我的代码已将它们堆叠在一起，但现在拒绝同时显示第二个。我已经尝试了其他问题中的许多建议，但我遇到了同样的问题(不显示第二个 div)或者它们仍然会彼此相邻显示。

我已经尝试了其他问题中的许多建议，但我遇到了同样的问题(不显示第二个 div)或者它们仍然会彼此相邻显示。

大屏幕可以，较小的屏幕应该显示相互堆叠的 div，但它只显示 div1。

.hiraola-banner_area-3 {
  padding-bottom: 60px;
  padding-top: 40px;
  display: flex;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .container_main1 {
    height: 69px;
    min-width: 100%;
  }
  .container_main2 {
    height: 200px;
    margin-top: 10px;
    min-width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 2000px) {
  .container_main1 {
    flex: 0 0 40%;
    padding-left: 50px;
    padding-right: 20px;
  }
  .container_main2 {
    flex: 1;
    padding-right: 20px;
    padding-left: 50px;
  }
}

<div class="hiraola-banner_area-3">
  <div class="container_main1">
    <h2>Over Rijlessponsor</h2>
    <p>BLOCK OF TEXT</p>
  </div>
  <div class="container_main2">
    <h2>Benieuwd naar hoe het werkt?</h2>
    <p></p>
    <div class="myIframe">
      <iframe class="resp-iframe" src="https://www.youtube.com/embed/5VAIxwWnsVY?">
            </iframe>
    </div>
  </div>
</div>

Answer 1

你不见了

.hiraola-banner_area-3 {
    flex-wrap: wrap;
}

.hiraola-banner_area-3 {
  padding-bottom: 60px;
  padding-top: 40px;
  display: flex;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .hiraola-banner_area-3 {
    flex-wrap: wrap;
  }
  .container_main1 {
    height: 69px;
    min-width: 100%;
  }
  .container_main2 {
    height: 200px;
    margin-top: 10px;
    min-width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 2000px) {
  .container_main1 {
    flex: 0 0 40%;
    padding-left: 50px;
    padding-right: 20px;
  }
  .container_main2 {
    flex: 1;
    padding-right: 20px;
    padding-left: 50px;
  }
}

<div class="hiraola-banner_area-3">
  <div class="container_main1">
    <h2>Over Rijlessponsor</h2>
    <p>BLOCK OF TEXT</p>
  </div>
  <div class="container_main2">
    <h2>Benieuwd naar hoe het werkt?</h2>
    <p></p>
    <div class="myIframe">
      <iframe class="resp-iframe" src="https://www.youtube.com/embed/5VAIxwWnsVY?">
            </iframe>
    </div>
  </div>
</div>