重新排序引導行3

我有兩個div行。對於其在桌面應該像重新排序引導行3

一個

乙

，併爲移動應該像

乙

一個

有沒有辦法做到這一點在引導3的拉推功能？

在下面的演示中，您將看到一個藍色和紅色條。

在桌面紅色條應位於頂部，在移動藍色條應位於頂部。

Demo

HTML

<div class="row"> 
    <div class="col-md-12 row1 clearfix" > 
    <div class="col-md-3 col-xs-6 col-md-push-6">A</div> 
    <div class="col-md-3 col-xs-6 col-md-push-6">B</div> 
    <div class="col-md-6 col-xs-12 col-md-pull-6">C</div> 
    </div> 
    <div class="col-md-12 row2 clearfix">D</div> 
</div>

CSS

.row1 { 
    background:red; 
    } 

    .row2 { 
    background:blue; 
    }

來源

2014-06-11 tomalex

據我它有點難以用丸/ PUSH類。我在項目中使用了隱藏/可見類來實現相同的功能。

的jsfiddle鏈接：http://jsfiddle.net/Sharan_thethy/XRdt8/

我希望這會幫助你。

CODE：

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <title>tast exp</title> 
    <link href="bootstrap.css" rel="stylesheet" type="text/css"> 
<style> 
.row1 { 
    background:red; 
} 

.row2 { 
    background:yellow; 
} 

</style> 

    </head> 


<body> 
<div class="row"> 
<div class="col-md-12 row2 visible-xs">yellow box top</div> 
    <div class="col-md-12 row1 clearfix" > 
     <div class="col-xs-6">red box left</div> 
     <div class="col-xs-6">red box right</div> 
    </div> 
    <div class="col-md-12 row2 hidden-xs clearfix">yellow box bottom</div> 
</div> 

</body> 
</html>

來源

2014-06-11 09:10:58 Sharanpreet

重新排序引導行3

回答

相關問題