将图像/内容与媒体查询水平对齐

Question

我有一行标题和描述的图像，当窗口缩小到991px或更小的宽度时，列表应该是垂直的，标题和描述在图像的右边，而不是在它下面。< / p>

<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

您定位错误的元素。您的容器不需要被推到display: inline-block或浮动。其中的元素包括：

@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;
    }
}