使用Bootstrap时屏幕缩小元素左移，如何实现小屏图片居中文本在下？

要实现小屏幕下图片居中、文本排列在图片下方的效果，直接调用Bootstrap 5内置的响应式工具类修改即可，具体修改后的代码如下：

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<div id="landing-page" class="d-flex flex-row justify-content-center">
  <div class="align-self-center col-lg-8">
    <div class="d-flex flex-wrap row align-content-center">
      <!-- 新增响应式居中、间距类 -->
      <div class="col-lg-6 text-center text-lg-start mb-3 mb-lg-0">
        <img id="profile-pic" src="https://picsum.photos/300" alt="Card image cap" style="width: 300px; height: 300px;">
      </div>
      <!-- 如果需要小屏文本也居中，可给下面的div加text-center text-lg-start类 -->
      <div class="col-lg-6" id="intro-text">
        <h2> Hi, Pleasure to meet you!</h2>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo libero, malesuada nec imperdiet in, pharetra quis odio. Nullam aliquet orci ut lobortis commodo. Pellentesque et ligula ut nisi ultrices pellentesque.</p>
      </div>
    </div>
  </div>
</div>

新增工具类作用说明：

• text-center：屏幕宽度小于lg断点时，内容水平居中
• text-lg-start：屏幕宽度大于等于lg断点时，内容左对齐，和原有大屏样式保持一致
• mb-3 mb-lg-0：屏幕宽度小于lg断点时，图片底部添加间距，和下方文本拉开间隔，大屏下取消多余间距

内容的提问来源于stack exchange，提问作者Pierre junior Sarrailh