title: Text and Image relative responsive using Bootstrap
body: <p>I am working on responsiveness of web page, for that I am using Bootstrap. </p>
  
  <p>The web page consists of both image and text. I am able to make both of them responsive, but the image is getting responsive separately of the text. Both are not relative to each other.</p>
  
  <p>I mean if an <code>img</code> is there after 5 lines of text, it is moving to some other place, but it's size is decreasing. How can I make both text and image relatively responsive? </p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6 col-sm-8 col-xs-12"&gt;
              &lt;img src="live_files/img_01.svg" class='img-responsive "stl_01"'&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6 col-sm-8 col-xs-12"&gt;
              &lt;div class="stl_02"&gt;
                  &lt;span class="stl_03"&gt;Browser Support &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6 col-sm-8 col-xs-12"&gt;
              &lt;div class="stl_04"&gt;
                  &lt;span class="stl_05"&gt;For PC users, LiveBinders is compatible
                      with Firefox 21 and higher, Safari 4.0.5 and higher, &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6 col-sm-8 col-xs-12"&gt;
              &lt;div class="stl_06"&gt;
                  &lt;span class="stl_05"&gt;Chrome 30 and higher, and I.E. 9.0 and
                      higher. &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6 col-sm-8 col-xs-12"&gt;
              &lt;div class="stl_07"&gt;
                  &lt;span class="stl_05"&gt;For Mac users, LiveBinders is
                      compatible with Safari 6.0.0, Chrome 30 and higher, and Firefox &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6 col-sm-8 col-xs-12"&gt;
              &lt;div class="stl_08"&gt;
                  &lt;span class="stl_05"&gt;21 and higher. &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>I'm converting from pdf to html, in that pdf file the image comes any where inbetween the text contents. </p>
  
  <p>But by adding this responsiveness the image coming first and then text gets displays, I mean the image is not properly in the same format as it was in pdf, it's misaligned. </p>
  
  <p>How to make Text and Image relative to each other?</p>