Question

我正在使用Bootstrap 4，并遇到一种独特的情况，我必须从以下格式的台式机版本重新订购：

[        ] [column 2]
[column-1] [column 3]
[        ]

到移动版本：

[column 2]
[column 1]
[column 3]

这是HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-7">
            [column 1]
        </div>
        <div class="col-sm-5">
            <div class="row">
                <div class="col-sm-12">
                    [column 2]
                </div>
                <div class="col-sm-12 order-last">
                    [column 3]
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

为了重新定位列，它们必须位于同一父.row中。使用Bootstrap浮动类和d-sm-block在较大的屏幕上禁用flexbox。然后order-first将div定位到移动设备上所需的位置...

<div class="container">
    <div class="row d-sm-block align-items-center">
        <div class="col-sm-7 float-left">
            [column 1]
        </div>
        <div class="col-sm-5 float-left order-first">
            [column 2]
        </div>
        <div class="col-sm-5 float-right">
            [column 3]
        </div>
    </div>
</div>

https://www.codeply.com/go/8bmIH3XGnL

重新为Bootstrap 4移动版中的列

1 个答案: