Html 无法使用bootsrap 3设置列的高度

我无法为这两列设置最终高度。 我为每个div列、contact和about设置了类。列拉伸的唯一方式是当我用内容填充它或将其设置为确定的像素高度时，但当我收缩页面时，它们堆叠并联系行被底部的about行吞没。这里的例子

这就是我想要达到的目标

---

引导的网格系统可以嵌套。 看看这个例子：

<div class="col-md-6 contact">
   <div class="col-xs-12-md-8">
      <p><a href="pdf/resumeChris.pdf" download>Download: Resume</a></p>
      <p><a href="mailto:webmaster@example.com">emailpgh@gmail.com</a></p>
   </div>
   <div class="col-xs-12-md-4">
      <img class="pull-right" src="https://d22r54gnmuhwmk.cloudfront.net/photos/8/tt/ub/WotTuBQzQzQoeZY-128x128-noPad.jpg" alt="chris">
   </div>
</div>

只需在移动视图的css文件中进行这些更改。在那之后，如果你的图像没有按照你的需要对齐，就给它留一个空白

<div class="col-md-6 contact">
   <div class="col-xs-12-md-8">
      <p><a href="pdf/resumeChris.pdf" download>Download: Resume</a></p>
      <p><a href="mailto:webmaster@example.com">emailpgh@gmail.com</a></p>
   </div>
   <div class="col-xs-12-md-4">
      <img class="pull-right" src="https://d22r54gnmuhwmk.cloudfront.net/photos/8/tt/ub/WotTuBQzQzQoeZY-128x128-noPad.jpg" alt="chris">
   </div>
</div>

.contact img{
 position: relative;
}
.contact {
      text-align:center;
    height:100%;
    padding:30px;
    background:tomato;
    font-weight:700;

}
.contact p{

  font-size:1.5em;


}