css - Bootstrap 3 为手机和平板电脑重新排序列

Question

我使用的是 Bootstrap 3，我正在尝试对移动设备和平板电脑中的列位置重新排序。

这怎么可能？

这是我的代码:

<div class="row main-row">
    <div class="col-md-6">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.
    </div>
    <div class="col-md-6">
    </div>
</div>

我想用 Bootstrap 来展示
正文
图片
文字
图片

现在显示
图片
正文
正文
图片

有办法处理吗？

What it looks like right now

Answer 1

可以在移动端使用flex。

 .main-row {
            display: flex;
            flex-flow: column;
        }

            .main-row .col-md-6 {
                display: flex;
                order: 1;
            }

            .main-row .col-md-6 +.col-md-6 {
                display: flex;
                order: 0;
            }

<div class="row main-row">
    <div class="col-md-6">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia illum recusandae delectus assumenda adipisci minima eaque! Tempore sit eius error, enim, voluptatem repudiandae dolorem atque fugiat aperiam placeat, corporis consequuntur.
    </div>
    <div class="col-md-6">
    IMGES
    </div>
</div>