Бутстрап, отвечающий за столбцы, столбцы столбцов

Question

Я строю структуру сетки, и я изменил классы контейнеров начальной загрузки на новое измерение, которое работает нормально. В настоящее время я пытаюсь достичь макета ниже и получил это далеко. Каждый столбец имеет фоновое изображение. Я пытаюсь поставить еще один col-md-3 в черный раздел, но не повезло. Какие-либо предложения?

Мой HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6 col-sx-6 col-md-3 col-lg-3 boats-row"> 
     </div> 
     <div class="col-md-3 home-row-red"> 
     </div> 
     <div class="col-md-6 col-sm-12 home-row-big"> 
     </div> 
    </div> 
</div> 

CSS

.boats-row { 
    max-height: 720px; 
    height: 100%; 
    height: 720px; 
    background: url(img/boats.png); 
    background-size: cover; 
} 

.home-row-red { 
    height: 360px; 
    background: red; 
    max-height: 360px; 
} 

.home-row-big { 
    height: 720px; 
    max-height: 720px; 
    background: url(img/panel-large.png); 
    background-size: cover; 
} 

Answer 1

И что-то вроде этого?

<div class="row"> 

    <div class="col-sm-12 col-md-6"> 
     <div class="col-sx-6 col-sm-6 col-md-6 boats-row "> 

     </div> 

     <div class="col-sx-6 col-sm-6 col-md-6 home-row-red"> 

     </div> 

     <div class="col-sx-6 col-sm-6 col-md-6 home-row-blue"> 

     </div> 
    </div> 

    <div class="col-md-6 col-sm-12 home-row-big"> 

    </div> 

</div>