<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
<body>
<div class="wrap">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-7 left-col">
      <div class="media">
        <img src="https://via.placeholder.com/60" alt="">
        <div class="media-body">
          asdasdasdas
        </div>  
      </div>
        <div class="media">
        <img src="https://via.placeholder.com/60" alt="">
        <div class="media-body">
          asdasdasdas
        </div>  
      </div>
        <div class="media">
        <img src="https://via.placeholder.com/60" alt="">
        <div class="media-body">
          asdasdasdas
        </div>  
      </div>
    </div>
    <div class="col-12 col-md-5 right-col">
      <ul>
        <li>fsdfsd </li>
        <li>fsdfsd </li>
        <li>fsdfsd </li>
      </ul>
    </div>
    </div>
  </div>
</div>
  </body>
</html>
.wrap {
  overflow: hidden;
}

.left-col {
  display: flex;
  flex-wrap: wrap;
  background-color: #ccc;  
}
.right-col {
  background: #fff;
}
.left-col, .right-col {
  position: relative;
  &:before {
    content: '';
    position: absolute;
    left:0;
    right: 0;
    top:0;
    bottom:0;    
     z-index:-1;     
  }
}
.left-col:before{
  left: -50vw;
  right: -50vw;
  background-color: #ccc;
}
.right-col:before {
  right: -50vw;
  background-color: #fff;
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.