title: How to make anchor tag responsive using bootstrap when it has long text and long text with image?
body: <p>I try to make design responsive to all web and devices. try to keep  first link button all the way to the left(annoucing document stuff button) and other button to all the way right. it gets break for small device. try also wrapping anchor text but not working. please advice.is it possible to achieve it though bootstrap only? if not what custom style i need to make please advice. i can't use jquery. </p>
  
  <p><a href="https://plnkr.co/edit/bUrcCEm8htMkk1nLnxx9?p=preview" rel="nofollow noreferrer">plunker link</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
       One way 
      &lt;div class="panel panel-body col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding"&gt;
        &lt;div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding pull-left"&gt;
          &lt;a class="btn btn-default"&gt;Annoucing Notification document(anc)&lt;/a&gt;  
        &lt;/div&gt;
        &lt;div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding pull-right"&gt;
          &lt;a class="btn btn-default"&gt;Remove stuff&lt;/a&gt; 
        &lt;/div&gt;
      &lt;/div&gt;&lt;br /&gt;
      another issue when it has image &lt;br/&gt;
      &lt;div class="well col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding"&gt;
        &lt;div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 no-padding"&gt;
          &lt;a class="btn btn-default"&gt;Annoucing Notification document(anc)&lt;/a&gt;  
        &lt;/div&gt;
        &lt;div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 no-padding col-lg-push-3"&gt;
          &lt;a class="btn btn-default"&gt;&lt;img id = "img_and" class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSGvUXEzMLx4-3F37e89TwVwdRt7wE1F79nMiT_Z7sPOZdk6RzC" style = "width:15pt"&gt;Remove stuff&lt;/a&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>anch{
    word-wrap : break-word;
  }
  
  #img_and{
    width:5pt;
    height : 15pt;
    vertical-align:top;
  
  }
  </code></pre>
  
  <p>This is how i would like to make it:</p>
  
  <p><a href="https://i.stack.imgur.com/XTg2Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XTg2Q.png" alt="enter image description here"></a></p>