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

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