horizontally align image/content with media query

Question

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.

<div class="row">
<div class="col-md-2">
    <img src="http://placehold.it/150x150">
     <h5 class="story-title">Title of the store goes here</h5>

     <h6>Description</h6>

</div>
<div class="col-md-2">
    <img src="http://placehold.it/150x150">
     <h5 class="story-title">Title of the store goes here</h5>

     <h6>Description</h6>

</div>
<div class="col-md-2">
    <img src="http://placehold.it/150x150">
     <h5 class="story-title">Title of the store goes here</h5>

     <h6>Description</h6>

</div>
<div class="col-md-2">
    <img src="http://placehold.it/150x150">
     <h5 class="story-title">Title of the store goes here</h5>

     <h6>Description</h6>

</div>
<div class="col-md-2">
    <img src="http://placehold.it/150x150">
     <h5 class="story-title">Title of the store goes here</h5>

     <h6>Description</h6>

</div>
<div class="col-md-2">
    <img src="http://placehold.it/150x150">
     <h5 class="story-title">Title of the store goes here</h5>

     <h6>Description</h6>

</div>

@media (max-width: 991px), (max-height: 460px) {
.col-md-2:hover {
    background-color: transparent;
}
.col-md-2 {
    display: inline-block;
    float: left;
}
}

JSFIDDLE

Answer 1

JSFiddle

You're targeting the wrong elements. Your container doesn't need to be pushed to display: inline-block or floated. The elements within it do:

@media (max-width: 991px), (max-height: 460px) {
    .col-md-2:hover{
        background-color: transparent;
    }
    .col-md-2 img {
        float: left;    
    }
    .col-md-2 {
        overflow: auto;
    }
}