title: horizontally align image/content with media query
body: <p>I have a row of images with title and descriptions, that when the window is downsized to 991px or fewer in width, the list should be vertical, with the title and description to the right of the image, not below it.</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="col-md-2"&gt;
      &lt;img src="http://placehold.it/150x150"&gt;
       &lt;h5 class="story-title"&gt;Title of the store goes here&lt;/h5&gt;
  
       &lt;h6&gt;Description&lt;/h6&gt;
  
  &lt;/div&gt;
  &lt;div class="col-md-2"&gt;
      &lt;img src="http://placehold.it/150x150"&gt;
       &lt;h5 class="story-title"&gt;Title of the store goes here&lt;/h5&gt;
  
       &lt;h6&gt;Description&lt;/h6&gt;
  
  &lt;/div&gt;
  &lt;div class="col-md-2"&gt;
      &lt;img src="http://placehold.it/150x150"&gt;
       &lt;h5 class="story-title"&gt;Title of the store goes here&lt;/h5&gt;
  
       &lt;h6&gt;Description&lt;/h6&gt;
  
  &lt;/div&gt;
  &lt;div class="col-md-2"&gt;
      &lt;img src="http://placehold.it/150x150"&gt;
       &lt;h5 class="story-title"&gt;Title of the store goes here&lt;/h5&gt;
  
       &lt;h6&gt;Description&lt;/h6&gt;
  
  &lt;/div&gt;
  &lt;div class="col-md-2"&gt;
      &lt;img src="http://placehold.it/150x150"&gt;
       &lt;h5 class="story-title"&gt;Title of the store goes here&lt;/h5&gt;
  
       &lt;h6&gt;Description&lt;/h6&gt;
  
  &lt;/div&gt;
  &lt;div class="col-md-2"&gt;
      &lt;img src="http://placehold.it/150x150"&gt;
       &lt;h5 class="story-title"&gt;Title of the store goes here&lt;/h5&gt;
  
       &lt;h6&gt;Description&lt;/h6&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>@media (max-width: 991px), (max-height: 460px) {
  .col-md-2:hover {
      background-color: transparent;
  }
  .col-md-2 {
      display: inline-block;
      float: left;
  }
  }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/ojanfr57/" rel="nofollow">JSFIDDLE</a></strong></p>