如何使用flexbox在单行和多行格式之间响应式切换时重新排列元素？

Question

我有一组表单输入，它们在较大视口上显示在单行上，并在较小视口上折叠为多行显示。在单行显示上，我希望在行的末尾有一个取消按钮，但在多行显示上，我希望它在第一行的末尾，并且我希望两行的末尾彼此齐平。

我可以通过使用两个取消按钮并根据媒体查询有条件地显示每个按钮来做到这一点，如下面的代码片段所示，但最好只有一个按钮并根据媒体查询移动其位置。在像我这样的示例中，有没有办法通过利用 Flexbox 而不是使用多个取消按钮来做到这一点？这看起来应该是可能的，但我无法想象具体如何做到。

* {
    box-sizing: border-box;
  }
  input[name="qty"] {
    width: 36px;
  }
  input[name="unit"] {
    width: 192px;
  }
  button {
    width: 72px;
  }
  input[name="item"] {
    width: 300px;
  }
  .group-2 button {
    display: none;
  }

  @media screen and (min-width: 700px) {
    fieldset {
      display: flex;
    }
    .group-1 button {
      display: none;
    }
    .group-2 button {
      display: inline;
    }
  }

<fieldset>
  <div class="group-1">
    <input type="text" name="qty" placeholder="qty" /><input
      type="text"
      name="unit"
      placeholder="unit"
    /><button type="button">CANCEL</button>
  </div>
  <div class="group-2">
    <input type="text" name="item" placeholder="item" /><button
      type="button"
    >
      CANCEL
    </button>
  </div>
</fieldset>

Answer 1

您不需要第二个 div。

带有 Flexbox 和

flex-wrap:wrap

的单个 div 将根据需要调整元素的方向 但是 需要在更宽尺寸的按钮上使用

order

将其移动到末尾。

* {
  box-sizing: border-box;
}

input[name="qty"] {
  width: 36px;
}

input[name="unit"] {
  width: 192px;
}

button {
  width: 72px;
}

input[name="item"] {
  width: 300px;
}

.group-1 {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (min-width: 700px) {
  button {
    order: 1;
  }
}

<fieldset>
  <div class="group-1">
    <input type="text" name="qty" placeholder="qty" />
    <input type="text" name="unit" placeholder="unit" />
    <button type="button">CANCEL</button>
    <input type="text" name="item" placeholder="item" />
  </div>
</fieldset>