CSS媒体查询适配问题：移动端调整摘要与按钮布局

要实现小屏设备上摘要移至图片下方、“read now”按钮位于摘要上方的布局，无需大幅修改HTML结构，通过CSS Flexbox的order属性和display: contents即可实现，结合媒体查询针对小屏设备调整布局：

步骤1：添加外层容器 #

将原有的flex容器和read按钮包裹到一个新的父容器中，方便统一控制布局：

<div class="book-container">
  <div class="flex">
    <img src="img/cover large.png" alt="Bored No More!" class="cover">

    <section class="info">
      <div class="title">
        <h2>Title:</h2>
        <p>Bored No More!</p>
      </div>

      <div class="genre">
        <h2>Genre:</h2>
        <p>Comedy/Fantasy/Slice of life</p>
      </div>

      <div class="summary">
        <h2>Summary</h2>
        <p>
          Not everyone can be a social person, Mango wasn't one. In fact, Mango was the type of person
          to sit in their room all day long and design and animate characters and upload them on the
          internet. This led to Mango being quite bored every day, and their only social interactions were when
          ordering a coffee, at their local coffee shop “A Cupfull of Charm”.
        </p>
        <p>
          One of Mango's most popular characters is Goober, a weird little marshmallow. The small Goober
          had become a fan-favourite amongst the large fanbase Mango had built. But suddenly, on a completely
          ordinary day, Mango had gone out to drink to finally be social. They were not that successful,
          but when Mango returned home they discovered something truly puzzling. Before them stood their
          animated character Goober.
        </p>
        <p>
          With this weird mystery upcoming, Mango had to try and figure out what was going on, or just
          entirely ignore this odd phenomenon…
        </p>
      </div>
    </section>
  </div>

  <section class="read">
    <a href="cha1.html">read now</a>
  </section>
</div>

步骤2：修改CSS布局 #

添加外层容器的样式，并通过媒体查询调整小屏时的元素顺序和布局：

/* 新增外层容器样式 */
.book-container {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.flex {
  display: flex;
  gap: 2em;
}

.cover {
  max-width: 15em;
  max-height: 26em;
  border-radius: 0.5em;
}

.info {
  margin-top: 1.5em;
  max-width: 40vw;
}

.info h2 {
  font-size: 1.1em;
  margin-right: 0.5em;
  color: var(--primaryColour);
}

.title {
  display: flex;
  margin-bottom: 1.5lh;
}

.genre {
  display: flex;
  margin-bottom: 1.5lh;
}

.summary h2 {
  margin-bottom: 0.2lh;
}

.read {
  margin: 2em 3.5em;
}

.read a {
  padding: 1em;
  background-color: var(--secondaryColour);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--darkColour);
  border-radius: 1em;
}

.read a:hover {
  text-decoration: underline;
}

/* 小屏设备适配（可根据需求调整断点） */
@media (max-width: 768px) {
  .flex {
    flex-direction: column;
  }
  /* 让.info的子元素直接成为.flex的子元素，方便调整顺序 */
  .info {
    display: contents;
    max-width: 100%;
    margin-top: 0;
  }
  /* 调整摘要的顺序，放到最后 */
  .summary {
    order: 3;
  }
  /* 调整read按钮的顺序，放到摘要之前 */
  .read {
    order: 2;
    margin: 1em 0;
  }
}

/* 原测试样式保留 */
img.cover { border: 1px solid black; height: 418px; width: 240px; }
.read a { background-color: orange; }

关键逻辑说明 #

• book-container作为外层flex容器，默认垂直排列子元素，确保小屏时元素能按顺序堆叠。
• 媒体查询中，display: contents让.info的子元素（title、genre、summary）直接成为.flex的子元素，突破原有嵌套结构限制，方便用order调整位置。
• 通过order属性重新定义元素顺序：title和genre保持默认顺序，read按钮设为order:2，summary设为order:3，实现小屏布局：图片 → 标题/分类 → read按钮 → 摘要。
• 调整小屏时的边距和宽度，确保内容适配移动端。

内容的提问来源于stack exchange，提问作者Mars