text over image not responsive in bootstrap

Question

I have an image, over which I am putting some heading on the right and left side of the image like below

<div class="container-fluid no-padding">
  <div class="row">
   <div class="col-md-12">
     <div class="col-sm-3 text-center image-overlapping">
       <h1>Hello Suarj</h1>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet. 
      </div>
       <img src="http://oi65.tinypic.com/15oi0w9.jpg" class="ls-bg" alt="Slide background" style="width:100%; height:auto;">
       <div class="col-sm-3 text-center image-overlapping right">
        <h1>Hello Suarj</h1>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet.
       </div>
   </div>
</div>

This works well for me, but it is not responsive for the mobile. How do I go about it.

Here's the fiddle for the same.

Answer 1

Here you go with the solution https://jsfiddle.net/65upzvk6/18/

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container-fluid no-padding"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-2 text-center image-overlapping"> <h1>Hello Suarj</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet. Provident, qui nisi voluptatum laboriosam ut vitae eaque nesciunt cumque omnis! Porro esse culpa fugiat molestias ab! Odit, quibusdam sunt consectetur optio ea velit accusamus voluptatem. </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-8"> <img src="http://oi65.tinypic.com/15oi0w9.jpg" class="ls-bg" alt="Slide background" style="width:100%; height:auto;" /> </div> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-2 text-center image-overlapping"> <h1>Hello Suarj</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet. Provident, qui nisi voluptatum laboriosam ut vitae eaque nesciunt cumque omnis! Porro esse culpa fugiat molestias ab! Odit, quibusdam sunt consectetur optio ea velit accusamus voluptatem. </div> </div> </div> </div> </div> 

This is one more way to skip position absolute.

Answer 2

So I added this media-query

 @media (max-width: 480px){
   .image-overlapping {position: relative; top : 0 !important;}
 }

And added col-xs-12 to the div which has my heading.

It works for me. Thanks for help.