如何实现桌面端图片居文本右侧、移动端图片居文本下方？

嘿，我帮你搞定这个布局问题！你想要的桌面端图片在文本右侧、移动端自动跑到下方的效果，其实用Bootstrap的网格系统就能轻松实现。先说说你现有代码里的小问题：你嵌套了多余的.row，这会干扰Bootstrap的网格布局逻辑，导致预期的响应式效果没出来。

下面是修正后的完整代码，直接用这个就能达到你想要的效果：

HTML 代码 #

<div class="container">
  <div class="row align-items-center justify-content-center">
    <div class="col-md-6 mb-3 mb-md-0">
      <div class="text">
        <h1>Header</h1>
        <h1>sub-header</h1>
        <br />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec venenatis tortor, id luctus nisi. Mauris aliquet felis ac lacus venenatis, eget porttitor est finibus. Aenean mi odio, sollicitudin et quam ut, pharetra eleifend magna. Vestibulum lorem metus, ultricies sed ipsum eget, vulputate rutrum enim. Aenean mattis sit amet justo nec hendrerit. Nulla quis volutpat tortor. Nunc ante enim, pharetra sed libero vitae, iaculis egestas nulla. Aenean ullamcorper, mauris vel ultricies blandit, erat augue gravida dui, vitae aliquet urna eros eu tellus. Nunc sagittis mi ex, sed gravida dolor imperdiet nec.</p>
      </div>
    </div>
    <div class="col-md-6">
      <div class="text">
        <img src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg" class="img-fluid" />
      </div>
    </div>
  </div>
</div>

CSS 代码 #

.text { 
  text-align: center; 
  color: black; 
  font-size: 30px; 
}

/* 可选：移动端缩小字体，让布局更紧凑 */
@media (max-width: 767px) {
  .text {
    font-size: 20px;
  }
}

关键调整说明 #

• 移除嵌套的多余.row：只保留一个.row包裹两个列，避免Bootstrap网格的嵌套冲突，保证布局逻辑正常运行。
• 使用col-md-6实现响应式拆分：在中等屏幕（≥768px，也就是桌面端），两个列各占容器宽度的50%，图片自然在文本右侧；在小于768px的移动端，每个列会自动占满整行，图片就会自动换行到文本下方。如果你想在更小的屏幕（比如≥576px）就开启两列布局，把col-md-6换成col-sm-6就行。
• 添加间距优化：mb-3 mb-md-0的作用是在移动端给文本列添加底部外边距，让图片和文本之间有合适的间距；到了中等屏幕及以上，就去掉这个外边距，保持左右布局的紧凑感。
• 垂直居中对齐：align-items-center让行内的文本和图片在垂直方向居中，视觉上更协调（如果不需要可以删掉这个类）。
• 水平居中容器：justify-content-center让整个内容在容器里水平居中，避免左右留白过多（同样可选）。

这样调整后，就能完美实现你想要的响应式布局效果啦！

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