<h1 class="text-center">Overlapping images demo</h1>

<div class="img-move-wrapper">
  <img src="https://placeimg.com/1000/400/arch" class="img-move img-move-1 img-fluid">
   <img src="https://placeimg.com/1000/400/nature" class="img-move img-move-2 img-fluid">
  <!-- this image is a placeholder so that the container has a responsive height. I am also hiding it on mobile because it is not needed when stacked. Here is more info on why this is needed > https://stackoverflow.com/questions/6319500/how-to-make-the-wrapping-div-element-with-relative-position-match-child-elements?rq=1 -->
  <img src="https://placeimg.com/1000/400/arch" class="img-fluid invisible d-none d-md-block">

</div>
<!-- /.container -->

.img-move-wrapper {
  border:1px solid red;
  position:relative;
  overflow:hidden;
  max-width:1140px;
  margin:0 auto;
}


/* Overlap the images on tablets and up */
@media (min-width:769px) {
    .img-move {
    position:absolute;
    width:55%;
  }
  .img-move-1 {
    left:0;
  }
  .img-move-2 {
    right: 0;  
    bottom:0;
  }
}

External CSS

  1. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.css

External JavaScript

  1. https://code.jquery.com/jquery-3.2.1.slim.min.js
  2. https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.js