Переместить flex-элемент в отдельную строку на мобильном телефоне

Question

Я хочу, чтобы гибкий элемент переносился на новую строку на мобильном устройстве под изображением, подобным этому (см. Изображение ниже).Но я не могу заставить его работать.Единственное решение, которое я могу придумать, - это иметь содержимое в двух разных местах в HTML и отображать: ни одна из версий с отзывчивым CSS.Но должно быть лучшее решение.Любая помощь высоко ценится.

Мое первоначальное мышление было примерно таким:

div {
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
}

ul {
  display: flex;
}


/* Ignore stuff under, it's just for aesthetics */

body {
  font-family: arial;
}

img {
margin-right: 20px;
}

ul {
  padding: 0;
  margin-left: 20px;
}

li {
  margin-right: 20px;
}

h1 {
margin: 0;
padding-top: 20px;
}

<div>
  <img src="https://via.placeholder.com/100x100" />
  <section>
    <h1>This is a headline</h1>
    <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
    </ul>
   </section>
  </div>

Answer 1

Вы можете рассмотреть поплавок на мобильном телефоне, чтобы иметь возможность сделать список под изображением:

div.container {
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
}

ul {
  display: flex;
}
@media (max-width:800px) { /*adjust this like you want*/
div.container {
 display:block;
}
div.container img {
  float:left;
}
section {
 display:block;
 padding-top:25px;
}
section ul {
 margin-top:50px;
}
  
}


/* Ignore stuff under, it's just for aesthetics */

body {
  font-family: arial;
}

img {
margin-right: 20px;
}

ul {
  padding: 0;
  margin-left: 20px;
}

li {
  margin-right: 20px;
}

h1 {
margin: 0;
padding-top: 20px;
}

<div class="container">
  <img src="https://via.placeholder.com/100x100" />
  <section>
    <h1>This is a headline</h1>
    <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
    </ul>
   </section>
  </div>