Bootstrap布局下如何实现图片随窗口大小自适应响应式效果

全屏状态正常效果：

窗口缩小后错位效果：

图片错位核心是给图片添加的float-right浮动类全局生效导致的：

• 大屏状态下两列各占50%宽度，图片浮动靠右的效果符合预期
• 窗口宽度缩小到768px（Bootstrap md断点）以下时，两个列都会自动变为100%宽度占满整行，浮动属性会让图片始终贴在列的最右侧，无法自动居中，最终出现错位。

• 移除图片标签上的float-right类，浮动属性本身不适合响应式场景的差异化对齐需求，很容易引发布局错乱。
• 给包裹图片的列容器添加Bootstrap内置的响应式flex布局工具类，实现不同断点下的自动对齐：小屏（宽度<768px）内容居中，中大屏（宽度≥768px）内容靠右对齐，完全保留原有大屏的显示效果。
• （可选优化）给按钮内部的链接标签添加text-white text-decoration-none类，去掉链接默认的蓝色文字和下划线，匹配按钮的视觉样式。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section id="welcome" class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 my-auto">
        <h1 class="thinh1">
          Mým cílem
        </h1>
        <h1>
          <strong>je Vaše spokojenost.</strong>
        </h1>
        <p class="welcomep">
          Vytvořím Vám webové stránky pro Vaše účely.
          <br> Vaše stránky, Vaše vizitka.
        </p>

        <p>
          <button type="button" class="btn btn-primary">
            <a href="/cenik.html" class="text-white text-decoration-none">Chci vytvořit webové stránky</a>
          </button>
        </p>
      </div>
      <div class="col-12 col-md-6 my-auto d-flex justify-content-center justify-content-md-end">
        <img class="rounded-circle" src="https://via.placeholder.com/250" alt="mme" width="250" height="250" />
      </div>
    </div>
  </div>
</section>

• 屏幕宽度≥768px时：文字、图片两列并排，图片在右侧列垂直居中且靠右对齐，和原有全屏显示效果完全一致
• 屏幕宽度<768px时：两列自动堆叠为上下排列，图片自动在所在行居中显示，不会出现贴边错位问题

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