引导程序中等于div和100%高度

Question

我正在尝试使用5个DIV制作页面.
计划是使用Bootstrap 3将一张图片放在中央DIV中,并在其他4张图片中放置一个链接.

通缉结果:

代码到目前为止:

.container-fluid2 {
  min-height: 100%;
  overflow: hidden;
  background-color: black;
}
.levogore5 {
  height: 50%;
  min-height: 50%;
  margin-bottom: -22%;
  padding-bottom: 22%;
  min-width: 25%;
  max-width: 100%;
  background-color: lime;
  vertical-align: top;
}
.levodole5 {
  height: 50%;
  min-height: 50%;
  margin-bottom: -25%;
  padding-bottom: 25%;
  min-width: 25%;
  max-width: 100%;
  background-color: green;
  vertical-align: baseline;
  margin-top: 22%;
}
.centar5 {
  height: 100%;
  min-height: 100%;
  min-width: 50%;
  max-width: 100%;
  background-color: red;
  margin-bottom: -50%;
  padding-bottom: 50%;
  overflow: hidden;
}
.desnogore5 {
  height: 50%;
  min-height: 50%;
  margin-bottom: -22%;
  padding-bottom: 22%;
  min-width: 25%;
  max-width: 100%;
  background-color: aqua;
  vertical-align: top;
}
.desnodole5 {
  height: 50%;
  min-height: 50%;
  margin-bottom: -25%;
  padding-bottom: 25%;
  min-width: 25%;
  max-width: 100%;
  background-color: blue;
  vertical-align: baseline;
  float: right;
  margin-top: 22%;
}

<div class="container-fluid2">
  <div class="row">
    <div class="col-sm-3 levogore5">levo gore</div>
    <div class="col-sm-5 col-sm-5 span2 centar5">centralni</div>
    <div class="col-sm-3 desnogore5">desno gore</div>
  </div>
  <div class="row">
    <div class="col-sm-3 levodole5">levo dole</div>
    <div class="col-sm-3 desnodole5">desno dole</div>
  </div>
</div>

我想我在这里阅读了所有现有的问题和答案.
我试过html/body 100%,max-height,container-fluid,-9999px,但他们没有工作.

我忘了提及,响应性是至关重要的,在我的例子中,那些漂浮:正确(在最后DIV的CSS中),在较小的屏幕上制造非常大的混乱.

我的想法是使用bootstrap来减少较小屏幕的问题,在更简单的页面引导程序只是制作一堆水平DIV所以我希望有这样的东西