Cannot set height for columns using bootsrap 3 - html

Question

I can't set definitive height for these 2 columns.
I set classes for each div column, contact and about. The only way that column stretches is when I fill it with content or set it to a definitive pixel height but when I shrink the page they stack and contact row gets swallowed up by the bottom about row. example here
http://codepen.io/Chris-Brennan/pen/rOWYab?editors=110
This is what I'm trying to achieve.
<div class="container" id="contact_container">
<div class="row">
<div class="col-md-6 contact">
<p><a href="pdf/resumeChris.pdf" download>Download: Resume</a><p>
<p>emailpgh#gmail.com</p>
<img class="pull-right" src="https://d22r54gnmuhwmk.cloudfront.net/photos/8/tt/ub/WotTuBQzQzQoeZY-128x128-noPad.jpg" alt="chris">
</div> <!---contact container--->
<div class="col-md-6 about">
<p><span style="color:tomato">About Me</span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <span style="color:tomato">Currently seeking Junior Design position.</span></p>
</div> <!---about container--->
</div> <!---end row--->
</div> <!------end container----->
body{
font-family:'Montserrat',sans-serif;
margin-top:50px;
}
#contact_container {
height:100%;
padding:0 50px;
border:1px solid red;
overflow:hidden;
}
.contact {
height:100%;
padding:30px;
background:tomato;
}
.contact p{
font-size:1.5em;
}
.contact a{
color:white;
}
.contact img{
position:absolute;
top:20px;
right:20px;
}
.about {
height:100%;
padding:30px;
background: #34495e;
color:white;
}
/* Iphone/Android (Small Devices) ----------- */
#media only screen and (min-width : 320px) and (max-width: 767px) {
/* Styles */
#contact_container {
padding:0 50px;
}
.contact {
height:100%;
padding:30px;
background:tomato;
font-weight:700;
}
.contact p{
text-align:center;
font-size:1.5em;
}
.contact a{
color:white;
}
.contact img{
}
.about {
height:100%;
padding:30px;
background: #34495e;
color:white;
}

Answer 1

the grid system of bootstrap can be nested.
look this example:
<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>emailpgh#gmail.com</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>

Answer 2

.contact img{
position: relative;
}
.contact {
text-align:center;
height:100%;
padding:30px;
background:tomato;
font-weight:700;
}
.contact p{
font-size:1.5em;
}
just make these changes in your css file for mobile view. after that just give a margin to your image if it is not aligned according to your need.