Bootstrap响应式布局问题：移动端文本未换行至图片下方

你的布局失效主要有两个核心问题，下面是修复方案和代码：

修复后的完整代码 #

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,100;9..144,200;9..144,300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=Montserrat:wght@100;300;400;700;900&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

<div class="small-box container-fluid">
  <div class="row">
    <div class="col-12 col-md-6">
      <img src="https://via.placeholder.com/300" alt="product image" class="img-fluid w-100">
    </div>
    
    <div class="col-12 col-md-6">
      <div class="text p-4">
        <h6>PERFUME</h6>
        <h1 class="h2">Gabrielle Essence Eau De Parfum</h1>
        <p> A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
        <div class="d-flex align-items-center gap-3">
          <h1 class="price text-success">$149.99</h1>
          <p class="price-tag text-muted"><s>$169.99</s></p>
        </div>
        <button type="button" class="btn btn-success w-100" name="button"> 
          <svg width="15" height="16" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z"
                fill="#FFF" />
          </svg>
          <b>Add to Cart</b>
        </button>
      </div>
    </div>
  </div>
</div>

关键修改点 #

• 移除图片固定宽度，添加img-fluid w-100类：让图片自适应父容器宽度，避免小屏幕溢出
• 给左侧列添加col-12类：确保移动端（<768px）占满整行，文本自动移到图片下方
• 给small-box添加container-fluid：让布局占满视口宽度，优化移动端显示
• 用d-flex布局优化价格对齐：让原价和现价横向排列，提升视觉整洁度
• 按钮添加w-100：让按钮在移动端占满整行，符合移动端交互习惯

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