Drop Content Below Hero Image - html

Question

I am trying to create a bootstrap site and what I need to happen is to have the content drop below a hero image I have if the screen gets to small. The hero image is just a DIV I've created that used the cover for the background. I've tried setting my columns to 12 for the smallest screen size, but it still just pushes it on top of my hero image. How do I get my content to push down below the image?
Example: http://www.bootply.com/aF7D9RDMqr
<div class="fill-screen container-fluid" style="height: 400px;">
<div class="row">
<div class="col-xs-12 col-sm-1 col-sm-offset-2" style="margin-top: 30px;"><img alt="Logo" src="http://placehold.it/184x18"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-sm-offset-2">
<h1>A new movement</h1><button class="btn btn-default" type="button">Default</button> <button class="btn btn-default" type="button">Default</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vehicula condimentum purus. Nunc vehicula lorem lacinia efficitur commodo. Aliquam tempor elit eget dui faucibus, non euismod metus rhoncus. In sed ipsum id dolor tincidunt euismod. Ut sit amet ex at tortor molestie malesuada.</p>
</div>
</div>
</div>
How I'd like it to look:

Answer 1

I upgraded your code here : codepen
What I needed to do is put the background in a div with no children, and place the container in absolute position to put it on the background, and then relative position for little screens. If you are using Bootstrap alpha 4, you can do it even more easily using mixins.
.container-fluid {
position: absolute;
top: 0;
}
#media only screen and (max-width : 767px) {
.container-fluid {
position: relative;
}
}