Rewrite to bootstrap and use transform on image - html

Question

I am trying to make the following banner in bootstrap. The demo of the banner can be seen her.
I cannot figure out how I can make this in bootstrap 3, and where to start. Should the row and col be like this for at start, or should it only be one row? Is it transform there is making the slant line on the image?
<div class="container-fluid">
<div class="row">
<div class="col-md-6">Text here</div>
<div class="col-md-6"><img src="https://image-here.jpg"></div>
</div>
</div>
The original code for the banner is:
.widget-about {
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
}
.widget-about .tg-container {
position: absolute;
left: 50%;
top: 0;
height: 100%;
max-width: 1200px;
transform: translateX(-50%);
}
.widget-about .tg-container .about-content-wrapper {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
background: #f9f9f9; }
.widget-about .tg-container .about-content-wrapper .about-block {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 999; }
.widget-about .tg-container .about-content-wrapper .about-block .about-title {
font-size: 28px;
margin: 0;
text-transform: uppercase; }
.widget-about .tg-container .about-content-wrapper .about-block .about-title a {
color: #454545; }
.widget-about .tg-container .about-content-wrapper .about-block .about-sub-title {
color: #00a9e0;
margin: 10px 0;
font-size: 16px;
text-transform: capitalize; }
.widget-about .tg-container .about-content-wrapper .about-block .about-content {
color: #737373;
font-size: 14px;
margin-top: 20px; }
.widget-about .tg-container .about-content-wrapper:before {
content: "";
position: absolute;
width: 1000%;
height: 100%;
background: #f9f9f9;
left: -1000%;
top: 0; }
.widget-about .tg-container .about-content-wrapper:after {
background: #f9f9f9 none repeat scroll 0 0;
content: "";
height: 2000px;
position: absolute;
right: 650px;
top: 50%;
transform: rotate(70deg) translateY(-50%);
width: 2000px;
z-index: 9; }
.about-img {
/* margin: 0; */
}
.about-img img {
width: 100%;
display: block; }
<section id="estore_about-3" class="widget widget-about clearfix">
<div class="section-wrapper">
<figure class="about-img">
<img width="1600" height="310" src="https://demo.themegrill.com/estore/wp-content/uploads/sites/49/2016/02/about.jpg">
</figure>
<div class="tg-container">
<div class="about-content-wrapper">
<div class="about-block">
<h3 class="about-title">
BEST STORE THEME </h3>
<h4 class="about-sub-title">Multicolor & Multipurpose Woocommerce Theme</h4>
<div class="about-content">
Aenean ipsum felis, luctus in hendrerit eget, varius non lacus. Duis et aliquet lacus. Quisque iaculis congue facilisis. Aenean eu dolor vestibulum, lobortis ligula eu, rhoncus diam. Etiam et efficitur augue. Etiam vehicula sem quis risus elementum euismod. Sed id mattis sapien. Ut lacinia aliquam massa eget efficitur. Suspendisse fermentum eget leo suscipit faucibus. Morbi
</div>
</div>
</div><!-- .about-content-wrapper -->
</div><!-- .tg-container -->
</div>
</section>

Answer 1

Edit
You won't be able to exactly match without some custom css, so here's the my minimum using mostly bootstrap classes and some custom css to get the desired styles (little slant) and expected responsive behavior.
.custom-bg {
background-size: cover;
background-position: center right;
min-height: 100px !important;
}
.custom-content:after {
background: transparent;
border-top: 250px solid transparent;
border-bottom: 0px solid transparent;
border-left: 80px solid #f7f7f7;
content: '';
height: 100%;
position: absolute;
right: -80px;
top: 0;
width: 0;
z-index: 10;
}
.custom-row {
margin: 0 !important;
}
#media (max-width: 991px) {
.custom-bg {
background-position: top right;
}
.custom-row {
flex-direction: column-reverse;
}
.custom-content:after {
display: none
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row custom-row">
<div class="col-lg-7 col-sm-12">
<div class="p-3 custom-content">
<h3>Best Store Theme</h3>
<h5 class="text-primary">Multicolor & Multipurpose Woocommerce Theme</h5>
<p>Aenean ipsum felis, luctus in hendrerit eget, varius non lacus. Duis et aliquet lacus. Quisque iaculis congue facilisis. Aenean eu dolor vestibulum, lobortis ligula eu, rhoncus diam. Etiam et efficitur augue. Etiam vehicula sem quis risus elementum euismod. Sed id mattis sapien. Ut lacinia aliquam massa eget efficitur. Suspendisse fermentum eget leo suscipit faucibus. Morbi</p>
</div>
</div>
<div class="col-lg-5 col-sm-12 custom-bg" style="background-image: url('https://demo.themegrill.com/estore/wp-content/uploads/sites/49/2016/02/about.jpg')">
</div>
</div>