在引導程序中更改div訂單

Question

我在我的項目中遇到問題。在我的網頁之一，我用這樣的標記：

<div class="row"> 
    <div class="col-md-6"> 
     <h2>Step 1</h2> 
     <p>Some text</p> 
     <p>Some text</p> 

     <h2>Step 3</h2> 
     <p>Some text</p> 
     <p>Some text</p> 
    </div> 
    <div class="col-md-6"> 
     <h2>Step 2</h2> 
     <p>Some text</p> 
     <p>Some text</p> 
    </div> 
</div> 

小提琴：http://jsfiddle.net/learner73/RW747/

所以，它會看起來像這樣在桌面上：

但，它看起來像這樣的移動：

它應該像bootstrap的響應式佈局一樣。毫無疑問，這一點。但是，絕對，我需要在連續的步驟1，2和3移動（1，3，2不步）：

如果我安排這樣我的HTML代碼，這將產生：

<div class="row"> 
    <div class="col-md-6"> 
     <h2>Step 1</h2> 
     <p>Some text</p> 
     <p>Some text</p> 
    </div> 
    <div class="col-md-6"> 
     <h2>Step 2</h2> 
     <p>Some text</p> 
     <p>Some text</p> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-6"> 
     <h2>Step 3</h2> 
     <p>Some text</p> 
     <p>Some text</p> 
    </div> 
    <div class="col-md-6"> 

    </div> 
</div> 

小提琴：http://jsfiddle.net/learner73/gLjG4/

現在，在手機，它看起來很完美。但是，在問題出現在桌面上，如果「第2步」內容高度高，它推的「第三步」內容如下了：

但是，它應該是喜歡我第一張圖片。

有引導類或事件來處理這種情況？如果不是，我該如何正確處理這個問題？提前致謝。

Answer 1

嘗試偏移或列排序類。

現在我已經測試柱重調，它爲你的意圖

<div class="row"> 
    <div class="col-md-6"> 
     <h2>Step 1</h2> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
     <p>Some text</p> 
    </div> 

    <div class="col-md-6"> 
     <h2>Step 2</h2> 
     <p>Some text</p> 
     <p>Some text</p> 
    </div> 
    <!-- reset --> 
    <div class="clearfix visible-md"></div> 
    <!-- reset --> 
    <div class="col-md-6"> 
     <h2>Step 3</h2> 
     <p>Some text</p> 
     <p>Some text</p> 
    </div> 
</div> 

這裏的小提琴http://jsfiddle.net/keypaul/9nh86/

Answer 2

你可以更好的樣式，但這裏是使用jQuery

的方法基本上，我已經將它分成了名爲「一」，「二」和「三」的獨立分區，並且使用這個：

$(window).resize(function() { 
    winWidth = $(window).width(); 
    winHeight = $(window).height(); 
    if(winWidth <= 986) { 
     $("#two").insertBefore("#three"); 
    } else { 
     $("#three").insertBefore("#two"); 
    } 
}); 

http://jsfiddle.net/XF6Uq/3/

在這裏你有另一種方法。而不是使用insertBefore，我使用類。 Basicaly，你左浮動每格，但「第二步」之一，你改變它浮動權當它是「桌面寬」

http://jsfiddle.net/hige/3TPec/

希望它能幫助！