Как я могу сложить два элемента друг под другом только на мобильном телефоне, используя 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-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>