Question

我正在尝试将col-md-6 div放置在移动设备上的网站顶部，使两个col-md-3元素彼此堆叠。

<div class="row">
    <div class="col-md-3">
        <div class="box">
            <div class="header">
                sidebar 1
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box">
            <div class="header">
                middle
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <div class="header">
                sidebar 2
            </div>
        </div>
    </div>
</div>

Answer 1

如果将.row元素设置为display: flex（示例在媒体查询中显示，但可以在查询外部完成），则可以使用order属性来排列顺序弹性项目。使用flex-direction: column，您可以垂直排列项目。您可以为所有商品设置订单，但是如果其他商品未分配订单，则单个商品上的-1值可确保获得最高排名。

@media screen and (max-width: 800px) {
    .row {
        display: flex;
        flex-direction: column;
    {
    .col-md-6 {
        order: -1;
    }
}

Answer 2

您不需要额外的CSS。只需使用Bootstrap order*类...

   <div class="row">
        <div class="col-md-3">
            <div class="box">
                <div class="header">
                    sidebar 1
                </div>
            </div>
        </div>
        <div class="col-md-6 order-first order-md-0">
            <div class="box">
                <div class="header">
                    middle
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="box">
                <div class="header">
                    sidebar 2
                </div>
            </div>
        </div>
   </div>

https://www.codeply.com/go/qMj32Mt0Ke

将div中心推到移动设备上的内容顶部

2 个答案: