将弹性项目移动到移动设备上的单独行

Question

我想要一个flex元素在这样的图像下（请参见下图）在移动设备上换行。但是我无法使它工作。我唯一能想到的解决方案是在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>