.left .bg-nacimiento {
background: #00c4c4;
right: 0;
height: 204px;
position: absolute;
top: 0px;
width: 100%;
width: 52vw;
z-index: -1;
}
.left .bg-guiness{
background: #00b1b1;
right: 0;
height: 200px;
position: absolute;
top: 203px;
width: 100%;
width: 52vw;
z-index: -1;
}
.left .bg-reconocimiento{
background: #009595;
right: 0;
height: 200px;
position: absolute;
bottom: 0px;
width: 100%;
width: 52vw;
z-index: -1;
}
.left .nacimiento{
position: absolute;
bottom: 45px;
padding-right: 22px;
}
.left .nacimiento i{
font-size: 35px;
color: #fff;
margin-top: 7px;
}
.left .nacimiento h4{
color: #fff;
font-style: italic;
font-size: 20px;
font-family: 'Raleway', sans-serif;
font-weight: 200;
}
.left .nacimiento p{
color: #fff;
font-size: 13px;
}
.left .guiness h4{
color: #fff;
font-style: italic;
font-size: 20px;
font-family: 'Raleway', sans-serif;
font-weight: 200;
}
.left .guiness p{
color: #fff;
font-size: 13px;
}
.left .guiness{
position: absolute;
top:50px;
padding-right: 22px;
}
.left .guiness i{
font-size: 35px;
color: #fff;
margin-top: 7px;
}
.left .reconocimiento h4{
color: #fff;
font-style: italic;
font-size: 20px;
font-family: 'Raleway', sans-serif;
font-weight: 200;
}
.left .reconocimiento p{
color: #fff;
font-size: 13px;
}
.left .reconocimiento{
position: absolute;
top: 241px;
padding-right: 22px;
}
.left .reconocimiento i{
font-size: 35px;
color: #fff;
margin-top: 7px;
}
/*columna derecha*/
.right .bg-ayuda {
background:#238491;
left: 0;
height: 510px;
position: absolute;
top: 0;
width: 100%;
width: 57vw;
z-index: -1;
}
.right .ayuda{
padding: 100px 19px;
}
.right .ayuda h3{
color: #fff;
font-size: 27px;
}
.right .ayuda h2{
color:#fff;
font-family: 'Raleway', sans-serif;
font-size: 34px;
font-weight: 100;
text-transform: uppercase;
}
.right .ayuda p{
color: #fff;
line-height: 24px;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section>
<div class="container-fluid" style="padding: 0">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5 hidden-xs left" style="height: 603px">
<div class="bg-nacimiento"></div>
<div class="nacimiento">
<div class="col-lg-2">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</div>
<div class="col-lg-10">
<h4>Reconocimiento al Dr. Pasqualini</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
<div class="bg-guiness"></div>
<div class="guiness">
<div class="col-lg-2">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</div>
<div class="col-lg-10">
<h4>Mas de 5000 Nacimientos</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
<div class="bg-reconocimiento"></div>
<div class="reconocimiento">
<div class="col-lg-2">
<i class="fa fa-comments-o" aria-hidden="true"></i>
</div>
<div class="col-lg-10">
<h4>Sabias que tenemos un record guiness?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
</div>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 hidden-xs right" style="height: 510px" >
<div class="bg-ayuda"></div>
<div class="ayuda">
<h3>LOREM IPSUM LOREM</h3>
<h2>Estamos aqui para ayudar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor </p>
</div>
</div>
</div>
</div>
</div>
</section>I am having problems with the construction of this structure in bootstrap, although I took the following code as an example, I do not know how to do well the division of the three colors that reach the end. Although I built something using positioning, I do not know if it is well used so that the content can be adapted well more than anything the problems arise in mobile mode. The example is armed in the following html Website
.row div {box-shadow:0 0 4px #000;}
.bg:before {position:absolute;left:0em; content:'';height:100%;width:800em;z-index:-1}
.bg-red:before {background-color:red;}
.bg-green:before {background-color:green;}
.bg-left:before {left:-400em;}
.bg-right:before {left:0;right:auto;}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-8">8</div>
<div class="col-md-7">7</div>
<div class="col-md-5">5</div>
<div class="col-md-4 bg bg-red bg-left">4</div>
<div class="col-md-8 bg bg-green bg-right">8</div>
<div class="col-md-7">7</div>
<div class="col-md-5">5</div>
</div>
</div> 