html - 根据屏幕分辨率更改 div 位置(flexbox？)

Question

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

我不知道如何将这两个框放在平板电脑版本的“mytextbox”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 子元素的 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 支持)