Bootstrap grid - extend background color - css

Question

I need to extend the background-color of the right column outside .container.
this is achieved by using :before. But background shows even if the column is absent.
Is there any better way?
Also I could not extend the background below 767px.
section{
padding: 50px 0;
position: relative;
}
section:before{
background: #f1f1f1;
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 50%;
}
#media (max-width: 767px){
section:before{
display: none;
}
.col-md-4:nth-child(2){
background: #f1f1f1;
padding: t 15px;
padding: b 15px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quibusdam repellendus facere aspernatur hic provident, nihil numquam natus exercitationem architecto blanditiis obcaecati reiciendis perferendis placeat consequatur quod fugiat aliquid dicta.</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quibusdam repellendus facere aspernatur hic provident, nihil numquam natus exercitationem architecto blanditiis obcaecati reiciendis perferendis placeat consequatur quod fugiat aliquid dicta.</p>
</div>
</div>
</div>
</section>
Codepen - https://codepen.io/afelixj/pen/MdVKaq

Answer 1

try this
#media (min-width:768px) {
.width {
max-width: 570px;
display: inline-block;
}
.bg {
background-color: #f2f2f2;
}
}
.width {
padding: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section>
<div class="row m-0">
<div class="col-md-6 p-0">
<div class="text-right">
<div class="width text-left">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quibusdam repellendus facere aspernatur hic provident, nihil numquam natus exercitationem architecto blanditiis obcaecati reiciendis perferendis placeat consequatur quod fugiat aliquid dicta.</div>
</div>
</div>
<div class="col-md-6 p-0">
<div class="bg">
<div class="width">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quibusdam repellendus facere aspernatur hic provident, nihil numquam natus exercitationem architecto blanditiis obcaecati reiciendis perferendis placeat consequatur quod fugiat aliquid dicta.</div>
</div>
</div>
</div>
</section>
</section>