html - 如何仅在移动设备上使用 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>

或者你可以只在更大的屏幕上定义 flex 容器:

<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>