Отзывчивая загрузочная плитка (новости вроде макета)

Question

Я застрял, пытаясь получить конкретный макет с бутстрапом, который не нашел успеха.

.row 
    .col-md-8 
    %h3 Title 
    %p Description 
    .col-md-4 
    .row 
     .col-md-12 
     %p Side Item 1 
     .col-md-12 
     %p Side Item 2 

Drawing of attempted Layout

Некоторые из ключевых вопросов, я имею получение одинакового расстояния между квадратами, все еще имея все выстраиваться в чистой форме.

Я также не знаю, как получить два элемента справа, чтобы «отстегнуть», если смотреть на меньшем экране.

Любая помощь или совет приветствуются.

Answer 1

Вы можете использовать nestedcolumns для раскладки. Достигнуть равной высоты - другая история и, вероятно, зависит (несколько) от того, что происходит внутри этих div.

/**CSS For Display Purposes Only**/ 
 

 
body, 
 
html { 
 
    padding-top: 50px; 
 
} 
 
.alert.alert-top { 
 
    height: 300px; 
 
    border-radius: 0; 
 
    text-align: center; 
 
} 
 
.alert.alert-bottom { 
 
    height: 140px; 
 
    border-radius: 0; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<hr> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div class="row"> 
 
     <div class="col-sm-12"> 
 
      <div class="alert alert-info alert-top">Top</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6"> 
 
     <div class="row"> 
 
     <div class="col-sm-12 col-xs-6"> 
 
      <div class="alert alert-success alert-bottom">Bottom Left</div> 
 
     </div> 
 
     <div class="col-sm-12 col-xs-6"> 
 
      <div class="alert alert-warning alert-bottom">Bottom Right</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr>