在移动设备上堆叠它们时更改列顺序（引导程序）

Question

我目前有两个这样的列：

<div class='row'>
    <div class='col-sm-7'>foo</div>
    <div class='col-sm-5'>blah</div>
</div>

我希望他们在移动设备上这样叠加： [5]以上 [7] 我尝试了以下方法：

<div class='row'>
    <div class='col-sm-7 col-push-7'>foo</div>
    <div class='col-sm-5 col-pull-5'>blah</div>
</div>

不幸的是，它不起作用，它仍然显示为： [7]以上 [5] 在移动设备上。

我错过了什么？

Answer 1

您可以使用flexbox来反转子项的顺序，如下所示：

＆＃13;

＆＃13;

.row{
    display:flex;
    flex-flow:row wrap-reverse;
    width:100%;
}
.row>div{
    flex:1 0 100%;
}

＆＃13;

<div class="row">
    <div class="col-sm-7">foo</div>
    <div class="col-sm-5">blah</div>
</div>

＆＃13;

＆＃13;

＆＃13;

请注意，根据您的目标浏览器支持，您可能需要为上面的某些属性和/或值添加前缀。有关详细信息，请参阅canisuse.com's compatibility table。