Пользовательские вложенные перевалы в Bootstrap 3

Question

я получил жесткое требование, чтобы сделать макет, как это изображение с Bootstrap 3:

В настоящее время я могу сделать это следующим образом:

Вот мой пример html макета: https://jsfiddle.net/isherwood/4etczrwx/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 

 
    <div class="row"> 
 

 
     <div class="col-sm-6" style="height:500px;background-color:red;"> 
 
      images 
 
     </div> 
 

 
     <div class="clearfix col-sm-6" style="height:100px;background-color:yellow;"> 
 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
 
     </div> 
 

 
     <div class="col-sm-3" style="height:200px;background-color:blue;"> 
 
      keyfeature 
 
      <ul> 
 
       <li>testest 1</li> 
 
       <li>testest 2</li> 
 
       <li>testest 3</li> 
 
       <li>testest 4</li> 
 
      </ul> 
 
     </div> 
 

 
     <div class="col-sm-3" style="height:600px;background-color:gray;"> 
 
      Price tab here 
 
     </div> 
 

 
     <div class="col-sm-9" style="height:800px;background-color:green;"> 
 
      Configurator here 
 
     </div> 
 
    </div> 
 
</div>

Я думаю, что I'am хватает чего-то, чтобы сделать зеленый седловины?
или я должен использовать push/pull, чтобы он работал как мое ожидание?

Answer 1

Примените свойство float: right; к серому блоку, когда ширина экрана станет 786px или больше. Для этой цели я определил новый специальный класс .pull-sm-right.

@media (min-width: 768px) { 
 
    .pull-sm-right { 
 
    float: right !important; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 

 
    <div class="row"> 
 

 
     <div class="col-sm-6" style="height:500px;background-color:red;"> 
 
      images 
 
     </div> 
 

 
     <div class="clearfix col-sm-6" style="height:100px;background-color:yellow;"> 
 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
 
     </div> 
 

 
     <div class="col-sm-3" style="height:200px;background-color:blue;"> 
 
      keyfeature 
 
      <ul> 
 
       <li>testest 1</li> 
 
       <li>testest 2</li> 
 
       <li>testest 3</li> 
 
       <li>testest 4</li> 
 
      </ul> 
 
     </div> 
 

 
     <div class="col-sm-3 pull-sm-right" style="height:600px;background-color:gray;"> 
 
      Price tab here 
 
     </div> 
 

 
     <div class="col-sm-9" style="height:800px;background-color:green;"> 
 
      Configurator here 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

если это фиксированный макет, чем вы можете просто добавить маржу-топ: -200px к этой зеленой секции, как это: jsfiddle.net/4etczrwx/1

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-6" style="height:500px;background-color:red;"> 
      images 
     </div> 

     <div class="clearfix col-xs-6" style="height:100px;background-color:yellow;"> 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
     </div> 

     <div class="col-xs-3" style="height:200px;background-color:blue;"> 
      keyfeature 
      <ul> 
       <li>testest 1</li> 
       <li>testest 2</li> 
       <li>testest 3</li> 
       <li>testest 4</li> 
      </ul> 
     </div> 

     <div class="col-xs-3" style="height:600px;background-color:gray;"> 
      Price tab here 
     </div> 

     <div class="col-xs-9" style="height:800px;background-color:green;margin-top:-300px;"> 
      Configurator here 
     </div> 
    </div> 
</div> 

Ура!