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>

我想引导显示
文本
图片
文字
图片

现在显示
图片
文字
文字
图片

有没有办法解决这个问题？

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>

Answer 2

不幸的是，在Bootstrap 3中，您无法在较小的屏幕中更改列的顺序，但可以在较大的屏幕中进行更改。现在，在Bootstrap 4中，您可以更改较小屏幕中的列顺序。您可以在下面看到执行此操作的一种方法。

<div class="row flex-column-reverse flex-md-row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9">
        main
    </div>
</div>

适用于手机和平板电脑的Bootstrap 3重新排序列

2 个答案: