如何使用 flexbox 仅在移动设备上堆叠两个元素

Question

我正在尝试弄明白 flexbox，但只是堆叠两个元素让我很难。

如何仅在移动设备上堆叠这些元素？

<div class="col-sm-6 col-12 d-flex justify-content-end">
  <!-- Right side -->
  <div class="d-flex">
    <p class="mb-0 align-self-center">© 2019 Alle rechten voorbehouden - Test</p>
    <img class="snmlogo align-self-center" src="images/snm-logo-white.png" alt="altimage">
  </div>
  <!--/ Right side -->
</div>

我说的是<p> 和<img> 元素。在桌面上，它们需要彼此相邻显示，这样可以正常工作。我使用justify-content-end 将它们放在页脚的右侧。在移动设备上，我尝试同时提供 display-block 和 width:100% 这两个元素，但这并没有改变任何东西。

我怎样才能让它们在桌面上保持这样，但在移动设备上堆叠？

Answer 1

在小屏幕上改变 flex 容器的方向。

flex-column 将默认设置一个列方向，您会在更高的断点（更大的屏幕）上覆盖该方向

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="d-flex flex-column flex-md-row align-items-center justify-content-center">
  <p class="mb-0 ">© 2019 Alle rechten voorbehouden - Test</p>
  <img class="snmlogo" src="
https://picsum.photos/40/40?image=0" alt="altimage">
</div>

或者你可以只在更大的屏幕上定义弹性容器：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="d-md-flex align-items-center justify-content-center text-center">
  <p class="mb-0 ">© 2019 Alle rechten voorbehouden - Test</p>
  <img class="snmlogo" src="
https://picsum.photos/40/40?image=0" alt="altimage">
</div>