这是一个有点棘手，这是我猜在这一刻，预期的设计与充分responsivness（图像应该永远不会与文字重叠）
希望有帮助，祝你好运！

.invisible-image {
  /** just to align the text */
   visibility: hidden !important;
}

.section-container {
  position: relative;
}

.container {
  /** just to put the text over the image */
  position: relative;
  z-index: 2;
}

.image-right-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.image-right {
  max-width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="section-container">
<div class="container d-flex justify-content-between align-items-center">
    <div class="col-6">
        <h1>Application Development</h1>
        <p className="mb-0">
            Craft innovative applications tailored to clients with latest programming techniques.
        </p>
    </div>
    <div class="col-6">
      <img src="https://via.placeholder.com/300x300"
        alt="Contact" class="d-block invisible-image img-fluid" />
    </div>
</div>
  <div class="image-right-container d-flex align-items-center">
    <div class="d-flex justify-content-end w-100">
       <div class="col-6 d-flex justify-content-end">
         <img src="https://via.placeholder.com/300x300"
          alt="Contact" class="image-right d-block" />
       </div>
    </div>
  </div>
</div>