Text overlapping in mobile view - html

Question

This works for bigger screen and shows the way I want but on Mobile, "Right Title" overlaps the "Left Title". Left title should go up but Right Title should be below it but instead, it goes on top of the Left Title.
What should I do?
<div class="IdeathonCover">
<img class="img-responsive" width="100%" src="bg-image.jpg">
<div class="IdeathonLeftTitle">
<h1>Left Title</h1>
</div>
<div class="IdeathonRightTitle">
<h1>Right Title</h1>
</div>
</div>
I tried this method too using the bootstrap 3 layout but it didn't work. The "col-x-12" is not being respected:
<div class="IdeathonCover">
<img class="img-responsive" width="100%" src="bgimage.jpg">
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="IdeathonLeftTitle">
<h1>Left Title</h1>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="IdeathonRightTitle">
<h1>Right Title</h1>
</div>
</div>
</div>
</div>
The CSS used is below:
.IdeathonCover {
position: relative;
}
.IdeathonLeftTitle {
position:absolute;
bottom: 10%;
left: 0;
padding: 0px 50px 20px;
color: #fff;
font-weight: 300;
}
.IdeathonRightTitle {
position:absolute;
bottom: 10%;
right: 0;
padding: 0px 50px 20px;
color: #fff;
font-weight: 300;
}
Anyone knows why this is happening?!

Answer 1

If you are using Bootstrap, as far as I'm aware, there is nothing wrong with using Bootstrap classes within absolute positioned elements. You could try something along the lines of:
CSS:
.IdeathonCover {
position: relative;
}
.IdeathonTitles {
position: absolute;
bottom: 10%;
width: 100%;
}
And your html:
<div class="container-fluid">
<div class="row">
<div class="IdeathonCover">
<img class="img-responsive" src="bgimage.jpg" alt="">
<div class="IdeathonTitles">
<div class="col-md-6">
<h1 class="text-center">Left title</h1>
</div>
<div class="col-md-6">
<h1 class="text-center">Right title</h1>
</div>
</div>
</div>
</div>
</div>

Answer 2

try adding this in the end of your css file-
#media (min-width: 320px) and (max-width: 750px){
.IdeathonLeftTitle { right: 0; }
.IdeathonRightTitle { left: 0; top: 67px; }
}
it should help.