Bootstrap4响应式布局：如何实现屏幕缩小时左侧文字叠加在右侧图片上

• 给最外层的row添加position-relative类，作为子元素绝对定位的参考容器
• 左侧内容列修改响应式类：将原有的col-6替换为col-lg-6，新增position-absolute position-lg-static w-100 w-lg-auto类，保证大屏下保持常规流式布局，小屏下脱离文档流覆盖在右侧内容上方
• 右侧图片列修改响应式类：将原有的col-6替换为col-12 col-lg-6，同时添加position-relative类，保证列内的箭头元素定位正常
• 调整左侧内容的内边距为响应式配置，避免小屏下内容溢出视口，比如将原有的m-5 pt-5 pr-5替换为m-lg-5 m-3 pt-lg-5 pt-3 pr-lg-5 pr-3
• 新增小屏适配CSS，取消左侧内容区的背景色，避免遮挡下方图片
• 若需要小屏下也显示联系按钮，可以将按钮的d-none d-lg-block修改为d-block

新增CSS代码：

/* 小于Bootstrap lg断点（992px）时左侧内容区背景透明 */
@media (max-width: 991.98px) {
  .bg-creame {
    background-color: transparent !important;
  }
}

修改后的完整HTML代码：

<div class="row position-relative">
  <div class="col p-0 col-lg-6 bg-creame position-absolute position-lg-static w-100 w-lg-auto" style="height: 100vh;">
    <div class="h-100 d-flex flex-column justify-content-start pt-5">
      <div class="m-lg-5 m-3 pt-lg-5 pt-3 pr-lg-5 pr-3">
        <h1 class="mb-5"><b style="font-weight: 900;"><b>Contact</b></b></h1>
        <p class="m-0" style="font-weight: 900;font-size: 18px;">Email Address</p>
        <p><a style="color: inherit !important;font-size: 23px;" href="mailto:support@regid.ca">support@XXX.com</a>
        </p>
        <p class="m-0 mt-5" style="font-weight: 900;font-size: 18px;">Mailing Address</p>
        <p style="font-size: 23px;">
          XXXXXX, 77 XXXX XXX X,
          XXXXXX, XX XXX 6XX
        </p>

        <div class="d-block">
          <button class="text-uppercase btn pr-5 pl-5 color-creame bg-orange"
            style="border-radius: 50px; letter-spacing: 1px;font-size: 20px;">
            Contact Us
          </button>
        </div>

      </div>
    </div>
  </div>
  <div class="col p-0 col-12 col-lg-6 bg-orange position-relative" style="height: 100vh;">
    <div style="position: absolute; bottom: 0; right: 0;">
      <div class="h-50 bg-orange d-flex flex-column justify-content-end" style="padding-top: 14rem;">
        <div class="text-center p-4">
          <i class="fas fa-arrow-up bg-black" style="font-size: 2rem;"></i>
        </div>
      </div>
    </div>
    <div class="d-flex flex-column h-100">
      <img height="100%" width="100%" src="./assets/img/Rectangle 8 (2).png" class="img img-responsive">
    </div>
  </div>
</div>

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