Question

这是我想要实现的（下面添加的图像）。我知道这可以通过媒体查询完成，它只是根据屏幕分辨率添加不同的样式。我现在拥有的是智能手机版（如下所示）。

我无法弄清楚我怎么能把这两个盒子放在＆＃34; mytextbox＆＃34;平板电脑版本的div。我正在尝试使用网格，拉右/左等不同的组合，它似乎不起作用。我刚开始阅读有关flexbox的内容。也许这是一个选择吗？如果您有任何想法，请帮忙。谢谢！

<div class="container">
        <div id="mytextbox" class="col-sm-12 col-xs-12">Text from the box</div>
        <div id="box1" class="col-sm-6 col-xs-3 mybox">BOX NAME1</div>
        <div id="box2" class="col-sm-6 col-xs-3 mybox">BOX NAME2</div>
        <div id="box3" class="col-sm-6 col-xs-3 mybox">BOX NAME3</div>
        <div id="box4" class="col-sm-6 col-xs-3 mybox">BOX NAME4</div>
</div>

在平板电脑上：

在智能手机上：

Answer 1

是的，您可以使用flexbox，准确地说，使用flex childs上的order属性：

// Create a flex container
.container {
    display: flex;
    // Force default row wrapping behaviour as bootstrap initially intends.
    flex-flow: row wrap;
}

#mytextbox {
    // Make it the 3rd item in the container flow
    order: 3;
}

#box1 {
    order: 1;
}

#box2 {
    order: 2;
}

#box3 {
    order: 4;
}

#box4 {
    order: 5;
}

// 768 is the bootstrap small-media breakpoint
@media screen and (max-width: 768px) {
    #mytextbox {
        // When there's not enough space, make it the first item again
        order: 1;
    }

    #box1 {
        order: 2;
    }

    #box2 {
        order: 3;
    }

    #box3 {
        order: 4;
    }

    #box4 {
        order: 5;
    }   
}

See it in action on codepen（因为：bootstrap css支持）

根据屏幕分辨率更改div位置（flexbox？）

1 个答案: