Как сделать расширяющуюся колонку по высоте в Bootstrap?

Question

[Alexey]

Такая ситуация:
Есть определенная структура:

<div class="container-fluid main">
  <div class="col-lg-4 left_top">Left</div>
  
  <div class="col-lg-8 right_top">
    <div class="col-lg-6 second">2</div>
    <div class="col-lg-6 third">3</div>
  </div>
  
  <div class="col-lg-12 col-md-8 bottom_center">Our tabs</div>
  
</div>

И css код:

.main{
  background-color: lightgrey;
}
.left_top{
  height: 30vh;
  border: 1px dotted red;
}
.right_top {
  height: 30vh;
  background-color: blue;
    border: 1px dotted red;
}
.second {
    background-color: lightblue;
    height: 90%;
    border: 1px dotted red;
}
.third {
    background-color: yellow;
    height: 90%;
}
.bottom_center {
  background-color: green;
  height: 50%;
  border: 1px dotted red;
}

codepen.io/anon/pen/NqwEZL

Необходимо чтобы нижняя колонка (зеленая) при разрешении *md уменьшалась по ширине до уровня синей колонки.
При этом черная колонка должна полностью занять всю высоту страницы.
Буду благодарен за любые конструктивные ответы.

Answer 1

[ShamblerR]

bootstrap не умеет скрывать классы при разрешение. И тут самый простой вариант скрыть на мд данный див и наоборот показать другой уже с новым классом. Криво но очень быстро