如何使这个简单的目标网页弹性框在所有相关的浏览器中都能正常工作？

Question

数小时以来，我一直在尝试使用flexbox在所有相关的浏览器中使用简单的着陆箱横幅布局，但是没有运气。下面是我要实现的布局示意图。基本上，两个图像框和一个标题框彼此相邻。达到标题框的某个最小宽度时，布局应换成堆叠的布局：

这是我的HTML代码：

<div class="landing_page_box">
  <div class="landing_page_box_left">
    <h2>Title</h2>
  </div>
  <div class="landing_page_box_right">
    <figure>...</figure>
  </div>
</div>

这是CSS代码：

div.wp-block-columns.landing_page_box {
  display: flex;
  flex-direction: row;
  flex-wrap:wrap-reverse;
}

div.landing_page_box_left {
  flex: 1 0 33.33%;
  min-width: 300px;
  padding: 30px;
  background: #cccccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

div.landing_page_box_right {
  flex: 2 0 66.66%;
}

虽然在Firefox V70和Chrome V78中似乎可以使用，但Internet Explorer 11中存在问题：即使浏览器窗口足够大，以至于彼此放置，两个盒子也总是堆叠在一起。您能帮我解决这个问题吗？预先感谢！

数小时以来，我一直在尝试使用flexbox在所有相关的浏览器中使用简单的着陆箱横幅布局，但是没有运气。下面是我想要的布局草图...

Answer 1

此处将左侧设置为大小1，将右侧设置为大小2，因此左侧将为33％大小

Answer 2

非常感谢您的建议！确实，在这个简化的示例中，您的方法效果很好。但是，如果将图像添加到右列，则会出现一些错误：