<div class="row jumbotron ">
      <div class="col-sm-8">
      <div class="text-left" style="margin-bottom:0">
          <h1>My First Bootstrap 4 Page</h1>
          <p>Resize this responsive page to see the effect!</p> 
      </div>
      </div>
      <div class="col-sm-4">
      <div class="Image">
          <img src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg">
      </div>
      </div>
  </div>

.Image {
  position: absolute;
  width: 550px;
  height: 400px;
  transform: rotate(45deg);
  overflow: hidden;
  margin-top: -100px;
  border: 10px solid transparent;
  padding: 15px;
}
.Image img {
  width: 100%;
  height: 50%;
  margin-top: 100px;
  transform: rotate(-45deg);

}