在移動設備上移動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從上到下

回答

相關問題