Twitter bootstrap 多个COL上的自举推拉

在我的网站上有这样的东西

----------------------------------
| Image 1  | Image 2  | Image 3  |
----------------------------------
| Text 1   | Text 2   | Text 3   |
----------------------------------

在较小的设备上，我想要这个

----------------------
| Image 1  | Text 1  |
----------------------
| Image 2  | Text 2  |
----------------------
| Image 3  | Text 3  |
----------------------

在手机上我想要这个

-----------
| Image 1 |
-----------
| Text 1  | 
-----------
| Image 2 | 
-----------
| Text 2  | 
-----------
| Image 3 | 
-----------
| Text 3  | 
-----------

显然，这将导致块被推/拉多次。Bootstrap似乎没有演示如何做到这一点

这是我迄今为止没有推/拉的代码：

                            <div id="services" class="col-sm-12">
                                <div id="services-img" class="col-lg-4 col-md-4 col-sm-4">
                                        <img>IMG 1 HERE</img>                           
                                </div>
                                <div id="services-img" class="col-lg-4 col-md-4 col-sm-4">
                                        <img>IMG 2 HERE</img>                           
                                </div>
                                <div id="services-img" class="col-lg-4 col-md-4 col-sm-4">
                                        <img>IMG 3 HERE</img>                           
                                </div>
                                <div id="services-text" class="col-lg-4 col-md-4 col-sm-4">
                                        <p>TEXT 1 HERE</p>                          
                                </div>
                                <div id="services-text" class="col-lg-4 col-md-4 col-sm-4">
                                        <p>TEXT 2 HERE</p>                          
                                </div>
                                <div id="services-text" class="col-lg-4 col-md-4 col-sm-4">
                                        <p>TEXT 3 HERE</p>                          
                                </div>
                            </div>

这里是IMG 1
这里是IMG 2
这里是IMG 3
此处为正文1

文本2在此

此处为文本3

将整个内容放入

并将第一个

更改为

工作示例

顺便说一句-您不能有具有相同id的元素，如

服务img

演示：

无需拉动或推动：）

这里是IMG 1
此处为正文1

这里是IMG 2
文本2在此

这里是IMG 3
此处为文本3

顺便说一句，自从你提到手机和平板电脑后，我就用了“xs”、“sm”和“md”。“lg”将自动从“md”读取。如果要将媒体查询的断点移大一个，只需将所有“X”替换为“sm”，“sm”替换为“md”，将“md”替换为“lg”。如果要测试演示全屏，请点击此处：

<div id="services" class="col-sm-12">
    <div class="col-xs-12 col-md-4">
        <div id="services-img" class="col-sm-6 col-md-12">
            <img>IMG 1 HERE</img>                           
        </div>
        <div id="services-text" class="col-sm-6 col-md-12">
            <p>TEXT 1 HERE</p>                          
        </div>
    </div>
    <div class="col-xs-12 col-md-4">
        <div id="services-img" class="col-sm-6 col-md-12">
            <img>IMG 2 HERE</img>                           
        </div>
        <div id="services-text" class="col-sm-6 col-md-12">
            <p>TEXT 2 HERE</p>                          
        </div>
    </div>
    <div class="col-xs-12 col-md-4">
        <div id="services-img" class="col-sm-6 col-md-12">
            <img>IMG 3 HERE</img>                           
        </div>
        <div id="services-text" class="col-sm-6 col-md-12">
            <p>TEXT 3 HERE</p>                          
        </div>
    </div>
</div>