title: Bootstrap's media object image is not responsive inside of tab
body: <p>I'm using the tab function to create a series of specials inside each tab I have an image, a header, and some body copy. I thought that using bootstraps media object component would work, which it does, except when it's resized to mobile.</p>
  
  <p>When sized to mobile the header and body copy will flow overtop their container, but the image will stay the same size, breaking the design.</p>
  
  <p>Is there a way to make the image resize, or is there a fix that allows the container to resize and make the header and body copy drop beneath the image?</p>
  
  <p>Please see the jsfiddle for the code: <a href="http://jsfiddle.net/DTcHh/126/" rel="noreferrer">http://jsfiddle.net/DTcHh/126/</a></p>
  
  <p>I'm a first time user, sorry for any errors. Thank you in advance</p>
  
  <pre><code>&lt;div class="container "&gt;
  &lt;div class="row clearfix"&gt;
      &lt;div class="col-md-12 column"&gt;
          &lt;div class="tabbable" id="tabs-1"&gt;
              &lt;ul class="nav nav-pills"&gt;
                  &lt;li class="active"&gt;
                      &lt;a href="#panel-1" data-toggle="pill"&gt;Special 1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#panel-2" data-toggle="pill"&gt;Special 2&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#panel-3" data-toggle="pill"&gt;Special 3&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="tab-content"&gt;
                  &lt;div class="tab-pane active specials" id="panel-1"&gt;
  
                      &lt;div class="media"&gt;
                        &lt;a class="pull-left" href="#"&gt;
                            &lt;img class="media-object img-responsive" src="http://i.imgur.com/SvujmcS.jpg" alt="240x240"&gt;
                        &lt;/a&gt;
                        &lt;div class="media-body "&gt;
                          &lt;h2 class="media-heading special-headline clearfix"&gt;Headline for special #1&lt;/h2&gt;&lt;/br&gt;&lt;p class="special-paragraph clearfix
                          "&gt; wow.lorem CSS. very placeholder. very generator. lorem dogescript. many ipsum.&lt;/p&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="tab-pane" id="panel-2"&gt;
                      &lt;p&gt;
                          This is the special for #2.
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="tab-pane" id="panel-3"&gt;
                      &lt;p&gt;
                          The thrid Special.
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>