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

Question

我在页面上有文本和该文本下的图像(多个 block )。样本: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>

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

所以我想在小屏幕上将文本移动到图像上方。

我目前的想法 - 添加现有文本的副本并添加对它们隐藏/可见的 Bootstrap 类。并根据屏幕大小切换文本。

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

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>