在引導程序中更改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/

因此，在桌面上看起來像這樣：

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

就像引導程序的響應式布局一樣。 毫無疑問。 但是，肯定的是，我需要在移動設備上依次執行第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”內容的高度很高，則會將“步驟3”內容推低很多：

但是，它應該像我的第一個圖像。

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

Answer 1

嘗試offsett或列排序類。

現在我已經測試了列響應式重置，它可以滿足您的意圖

 <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的一種方法

基本上，我將其分為名為“一個”，“兩個”和“三個”的獨立div，並使用了以下代碼：

$(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，而是使用類。 基本上，您在每個div處向左浮動，但在“第2步”中，將其更改為在“桌面級”時向右浮動

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

希望能幫助到你！