JSFiddle - React, Tailwind, and code Playground

by Matungoo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<body>
  <div class=container>
  <div class="row">
    <div class="col-md-6">
      <div class="content-box">
        <div class="img-box left">
        image
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="content-box">

      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="content-box">

      </div>
    </div>
    <div class="col-md-6">
      <div class="content-box">
         <div class="img-box right">
        image
        </div>
      </div>
    </div>
  </div>
</div>
</body>

CSS

body {
  padding: 15PX 0;
}
.content-box {
  position:relative;
  width:100%;
  min-height:350px;
  background:#ccc;
  margin: 15px 0;
}

.img-box.left {
  position:absolute;
  top:-15px;
  right: -7px;
  bottom:-15px;
  width:calc( 50vw - 15px );
  background:red;
}

.img-box.right {
  position:absolute;
  top:-15px;
  left:-7px;
  bottom:-15px;
  width:calc( 50vw - 15px );
  background:red;
}

@media only screen and (max-width: 768px) {
    .img-box.left, .img-box.right  {
      position:absolute;
      top:0px;
      left:0px;
      right:0px;
      bottom:0px;
      width:100%;
      background:red;
    }
}