Bootstrap 4使用Flexbox，响应列但列无响应内容

Question

我需要创建以下布局：

初​​始：

调整大小后：

因此，第1组和第2组不会包装。

但我得到的是：

这是我的代码：

<div class="d-flex flex-md-row flex-column">
  <div class="mr-auto p-2">
    <input type="button" value="Group 1"/>
    <input type="button" value="Group 1"/>
  </div>
  <div class="p-2">
    <input type="button" value="Group 2"/>
    <input type="button" value="Group 2"/>
  </div>
</div>

Codeply

感谢您的帮助。

更新。 如果我将flex-column添加到顶部div我有点得到我需要的东西但是当我调整组2时太早进入新行。组之间仍有足够的空间，不需要两行。

Answer 1

将flex-wrap添加到

<div class="d-flex flex-md-row">

所以它变成了

<div class="d-flex flex-md-row flex-wrap">

Fiddle demo