Question

我在该文本下有页面文本和图像（多个块）。示例：JsFiddle

<div class="container">
<div class="row">
    <div class="col-md-6">
        <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" class="img-responsive"/>
        <br/>
        <h4>Test Text</h4>
    </div>
         <div class="col-md-6">
                         <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" class="img-responsive"/>
        <br/>
        <h4>Test Text</h4>
         </div>
</div>

但是在小屏幕上，图像下的文字可以被用户识别为下一张图像的文字，这是错误的。

所以我想在小屏幕上移动图像上方的文字。

我目前的想法 - 添加现有文本的副本并添加隐藏/可见的引导类。并按文字大小切换文字。

但我希望有更多优雅的解决方案，而不是再次添加相同的文本，但在不同的位置

Answer 1

试试这个..我编辑了你的代码

<div class="container">
<div class="row">
    <div class="col-md-6">
         <h4>Test Text</h4>
        <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" class="img-responsive"/>
         <h4>Test Text</h4>
        <br/>

    </div>
         <div class="col-md-6">
                         <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" class="img-responsive"/>
        <br/>

         </div>
</div>

Answer 2

您可以使用媒体查询并显示：flex属性并对元素进行排序。

CSS

@media (max-width:768px) {
.row .col-md-6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

img {
  order: 2;
}

h4 {
  order: 1;
 }
}

在小屏幕上更改文本和图像的顺序

2 个答案: