顛倒divs顯示在手機視圖中的方式

我在桌面上看到了一個與附加圖像相似的視圖。我正在使用bootstrap。我希望移動視圖看起來像第二個圖像。我如何實現它。如果你看到它下拉到底部。 enter image description here 顛倒divs顯示在手機視圖中的方式

桌面視圖

移動視圖

enter image description here

來源

2015-07-21 Hacker

引導哪個版本的？ –

正確的方式做到這一點是使用引導程序內置的列順序類，.col-sm-push-*和.col-sm-pull-*

文檔：http://getbootstrap.com/css/#grid-column-ordering

下面的代碼。

<div class="row"> 
    <div class="col-sm-3 col-sm-push-3"> 
    <button class="btn btn-primary">Button 1</button> 
    </div> 
    <div class="col-sm-3 col-sm-push-3"> 
    <button class="btn btn-primary">Button 2</button> 
    </div> 
    <div class="col-sm-3 col-sm-push-3"> 
    <button class="btn btn-primary">Button 3</button> 
    </div> 
    <div class="col-sm-3 col-sm-pull-9"> 
    <select class="form-control"></select> 
    </div> 
</div>

演示：您正在使用http://www.bootply.com/mHPiPxZ6YY

來源

2015-07-21 10:31:29 ChaoticNadirs

- 效果很好..實際上它在做什麼。你能解釋一下，因爲我是新手bootstrap – Hacker

當然。首先要注意的是引導程序3首先是移動的，所以在這個例子中，我按照他們在移動設備上顯示的順序來定義div。然後，對於較大的設備，我使用「拉」類將下拉9列向左移動，「推」類將每個按鈕移動3列到右邊。希望這可以幫助！ – ChaoticNadirs

感謝您的可愛答覆和答案 – Hacker

如果您正在使用bootstraper 3.0及以上，你可以拉右類添加到每個列。點擊「完整頁面」檢查桌面視圖。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="pull-right col-md-3 col-xs-12">Button</div> 
 
    <div class="pull-right col-md-3 col-xs-12">Button</div> 
 
    <div class="pull-right col-md-3 col-xs-12">Button</div> 
 
    <div class=" pull-right col-md-3 col-xs-12">Dropdown</div> 
 
    </div> 
 
<div>

來源

2015-07-21 09:59:01

Hacher您好。你可以這樣做，hidden-xx類。
這是Fiddle。

<div class="col-xs-12 col-sm-3 hidden-xs btn btn-success"><h3>Dropdown</h3></div> 
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div> 
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div> 
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div> 
<div class="col-xs-12 col-sm-3 hidden-sm hidden-md hidden-lg btn btn-success"><h3>Dropdown</h3></div>

enter image description here

你也可以使用一個小的jQuery

這裏是Fiddle。
只是調整和打運行或刷新等它改變。

<div class="col-xs-12 col-sm-3 btn btn-success" id="first"><h3>Dropdown</h3></div> 
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div> 
<div class="col-xs-12 col-sm-3 btn btn-primary"><h3>Button</h3></div> 
<div class="col-xs-12 col-sm-3 btn btn-primary" id="last"><h3>Button</h3></div> 
<script> 
    if ($(window).width() < 767) { 
     $("#first").insertAfter("#last"); 
    } 
</script>

來源

2015-07-21 10:04:36 AngularJR

沒有必要在標記中重複下拉兩次 – ChaoticNadirs

顛倒divs顯示在手機視圖中的方式

回答

相關問題