Fix position of responsive image in responsive header, next to text - html

Question

The idea of this is to have a responsive header with text and an image element, which sit on a fixed background image.
I've tried to do this with bootstrap columns, which works on desktop to come out the way I want it. On smaller devices however, the bootstrap media queries do exactly what they are supposed to do and break the columns up to be displayed below each other.
I am out of ideas for this. I know I need to fix the image element somehow to stay consistently on the bottom end of the container, but since the entire thing is responsive I have no idea how to accomplish that.
Here is what I have so far, but this is not the solution. I appreciate any suggestions.
<section class="section swatch-black section-text-shadow section-inner-shadow">
<div class="background-media" style="background-image: url('http://some-url.com/home-intro.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment:fixed; background-position: 50% 60%;"> </div>
<div class="container">
<div class="row">
<div class="col-md-6 text-left element-normal-top element-normal-bottom">
<h1 class="bigger hairline bordered-normal element-tall-top"> Header Text<br>
<strong>More Text </strong> </h1>
<p class="lead"> Even more text </p>
learn more
contact us </div>
<div class="col-md-6 text-right">
<img src="assets/images/uploads/test.png" style="position:relative; right: 0px; bottom: 0px; top: 150px;">
</div>
</div>
</div>
</section>

Answer 1

you can set up your own column structure. Here's an example that I made for you real quick:
http://jsfiddle.net/97wswqvr/
this will need more work obviously, depending on the rest of your header text/buttons etc... but its a good place to start
html
<header>
<div class='content col col-1-2'>
<div>
text text text
</div>
<div>
text text text
</div>
<div>
text text text
</div>
</div>
<div class='col col-1-2 img'>
<img class='col' src='http://store.storeimages.cdn-apple.com/8459/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone/compare/iphone-compare-bbh-201411?wid=254&hei=210&fmt=png-alpha&qlt=95&.v=1416449205305'/>
</div>
</header>
css
html,body {
margin: 0;
}
header {
background-image: url(http://wowslider.com/sliders/demo-85/data1/images/southtyrol350698.jpg);
text-align: center;
}
.content {
color: white;
padding: 40px 0;
}
.col {
display: inline-block;
vertical-align: middle;
}
.col-1-2 {
width: 45%;
}
.img {
}
img {
width: 70%;
}