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/

现在，在移动设备上，它看起来很完美。但是，问题在于桌面，如果高度为＆＃34;步骤2＆＃34;内容很高，它推动了第3步＆＃34;内容低于：

但是，它应该像我的第一张照片。

有引导类或事件来处理这样的场景吗？如果不是，我该如何正确处理这个问题？提前谢谢。

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

基本上，我把它分成了名为“one”，“two”和“three”的独立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，但是“Step 2”，你将它改为浮动，当它是“桌面宽”时

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

希望它有所帮助！

在bootstrap更改div顺序

2 个答案: