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

希望能帮助到你！