在移动设备上移动div从上到下

我可以使用bootstrap自行完成此操作吗？我使用的是版本4（在alpha中），但如果它在版本3上运行，它应该在v4上运行。在移动设备上移动div从上到下

我有2个div的一列中，像这样

<div class="row"> 
    <div class="col-xs-12"> 
     <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div> 
     <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div> 
    </div> 
</div>

有没有一种方法我可以得到的div围绕交换在移动设备上？我不想在这里使用任何javascript，如果可能的话，我只想使用“bootstrap”类。

如果引导程序不可能，那么只有css请。

来源

2015-10-21 Gillardo

http://stackoverflow.com/questions/20171408/how-do-i-change-bootstrap-3-column-order-on-mobile-layout – disinfor

这适用于分选列，我需要排序2行 – Gillardo

不知道使用引导来实现此目的的方法，但可以使用CSS'flexbox完成。

添加一个新的选择.col-xs-12具有以下属性：
- display: flex;告诉孩子们使用flexbox模型
- flex-direction: column-reverse;将确保孩子从底部流向顶部（而不是默认的左到右）

运行下面的代码片段中FUL l屏幕并调整窗口大小以查看元素更改的顺序。

@media only screen and (max-width: 960px) { 
 
    .col-xs-12 { 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
    } 
 
}

<div class="row"> 
 
    <div class="col-xs-12"> 
 
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div> 
 
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div> 
 
    </div> 
 
</div>

来源

2015-10-21 13:47:26

.col-xs-12 { height: 200px; position:relative; } 
.col-xs-12 div { position:absolute; top:0; left: 0; width:100%; } 
.col-xs-12 div:last-child { top: auto; bottom: 0; } 

@media (max-width: 480px) { 
    .col-xs-12 div { top:auto; bottom:0; } 
    .col-xs-12 div:last-child { top: 0; bottom: auto; } 
}

来源

2015-10-21 13:24:38

在移动设备上移动div从上到下

回答

相关问题