title: Media query for img src attribute
body: <p>How to change image in mobile view for <code>img</code> <code>--&gt;</code> <code>src</code> ? I want to change to different image in mobile view using media query how to do that? <em>I don't want to use it as background image!</em></p>
  
  <pre><code>&lt;div class="item"&gt;
      &lt;img src="http://lorempixel.com/1500/600/abstract/1" class="img-responsive"&gt;
      &lt;div class="container"&gt;
          &lt;div class="carousel-caption"&gt;
              &lt;h1&gt;Changes to the Grid&lt;/h1&gt;
              &lt;p&gt;Bootstrap 3 still features a 12-column grid, but many of 
                  the CSS class names have completely changed.
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>