Bootstrap 4 - 使用Flexbox和响应列

Question

我正在尝试使用位于行开头和结尾的按钮来创建一行。这是两个图像。首先，当浏览器最大化时：

第二个是在我调整浏览器大小之后：

为此，我正在实现以下代码：

<div class="d-flex justify-content-end">
   <div class="mr-auto p-2">Flex item 1</div>
   <div class="p-2">Flex item 2</div>
</div>

Fiddle

了解如何将Flexbox与B4配合使用。代码确实正确地定位了项目，但是当我调整它的大小时，列不会叠加。

知道如何让它完全响应吗？

感谢您的帮助。

Answer 1

也可以响应地使用flex-row和flex-column类。您可以使用flex-sm-row将行保持水平在sm和向上，然后flex-column在xs屏幕宽度上垂直堆叠...

<div class="d-flex flex-sm-row flex-column">
  <div class="mr-auto p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
</div>

http://www.codeply.com/go/G3Z6OLCBtF