Hola estoy teniendo problemas con el armado de esta estructura en bootstraps, si bien tome como ejemplo el siguiente codigo que adjunto, nose como hacer bien la división de los tres colores que lleguen al extremo Si bien arme algo usando posicionamiento nose si esta bien empleado para que el contenido se logre adaptar bien mas que nada los problemas surjen en modo mobile. El ejemplo esta armado en el siguiente html Pagina web
.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;}
<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>