相对地在文本上方或下方定位图像。

Question

这是一个非常荒谬的问题，但一直困扰着我一段时间。我正在设计这个website，我刚刚完成了响应/移动视图。目前它看起来还不错，但那是因为当视口太小而图像看起来不太好时，我用display : none:删除了图像。 （可以在drleilamasson.com/css/responsive.css看到）

我要改变的图像是书（在书的部分下）和鹦鹉（在社交部分下）如果我不删除它们，他们只会翻阅我的文本/嵌入帖子并阻止内容。我想要发生的是图书图像高于完全居中的文本。我已经摆弄了这些图像的样式，但从来没有弄明白。

我希望你们能搞清楚！谢谢:)）

Answer 1

您已经在<section id="about">上设置了flexbox父级，因此我们可以使用子级的方向和顺序。

@media (max-width: 1065px) {
  #about {
    flex-direction: column; /* stack the children */
  }

  .leila-book-img {
    ...
    display: none; <-- remove
    margin: 0 auto;
    order: 2; /* put the image container after the text */
  }

  .about-content {
    padding-bottom: 1em;
  }
}