Twitter bootstrap 引导-带图像的行，带文本的行-需要在较小的设备上对齐

在较小的屏幕上查看时，我对引导格式有问题。我已经找到了“类似”的答案，但无法找到解决办法。 下面是对网格元素进行几次不同实验后的基本html。 我附上了一张照片，显示我也在寻找什么。 谢谢你的帮助！ 我需要图像列下方的文本列始终保持在相应列的下方。不幸的是，我不能发布图片

图像1图像2图像3 文本1文本2文本3

应转到：

图像1
text1
图像2
text2
图像3
text3

    <section class="container-fluid">
        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-12 element-img"</div>
            <div class="col-md-4 col-sm-6 col-xs-12 element-img"</div>
            <div class="col-md-4 col-sm-6 col-xs-12 element-img"</div>
        </div>
    </section>


    <section class="container-fluid">
        <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-12">text</div>
                <div class="col-md-4 col-sm-6 col-xs-12">text</div>
                <div class="col-md-4 col-sm-6 col-xs-12">text</div>                                 
        </div>
    </section>

我希望您能理解您的问题：
你为什么不把文本和它们所属的图像放在同一列呢

例如：

<section class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="img-element"></div>
            <p>text</p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="img-element"></div>
            <p>text</p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="img-element"></div>
            <p>text</p>
        </div>                                 
    </div>
</section>


正文

正文

正文

我想这可能行得通，但在这种情况下，我想我需要将它们放在单独的行/列中。文本被格式化为与图像大小相同的“正方形”，带有填充、js脚本中的一些幻灯片等。因此它就像一个单独的实体。我希望我说的很清楚。图像和文本占据了大小相似的框，有边框，有填充，等等，所以我认为你必须设计图像和文本元素的样式，或者用div包装而不是列。我怀疑将这些元素放在同一列中是在移动设备上实现所需元素顺序的唯一方法。好的，我来试试。谢谢你的帮助Dreave博士