html - Bootstrap 3 移动列以展开行并使其下方的列与下一列嵌套

Question

默认情况下，我的页面上有 3 个元素，如下所示:

___________________________
|  Element  | Element 2 |
|      1    | Element 3 |
---------------------------

我需要的是在点击事件上，将元素 2 更改为全宽位于顶部，同时将元素 1 和元素 3 保持在一起，如下所示:

___________________________
|      Element 2         |
| Element  |   Element 3 |
|    1     |             |
---------------------------

还包括一些可能有助于可视化的屏幕截图:

元素布局 - 默认

元素布局 - 过渡后

我试过使用推拉 Bootstrap 类，除了第三个元素总是被强制到一个新行，在元素 1 下，它可以工作。我已经看到其他示例，它们使用元素 2 和 3 创建默认布局他们自己的行，但是在将其更改为全宽时，如果不进行大量操作，那将无法工作。

这是我当前的标记:

<div class="row">
    <div class="col-md-4 col-md-push-8">
        <div>Element 2</div>
        <div>Element 3</div>
    </div>
    <div class="col-md-8 col-md-pull-4">
        <div>Element 1</div>
    </div>
</div>

我也尝试过将元素 3 移动到它自己的列中，但它总是在元素 1 下方以其自己的行结束，就像我这样做时一样:

<div class="row">
    <div class="col-md-4 col-md-push-8">
        <div>Element 2</div>
    </div>
    <div class="col-md-8 col-md-pull-4">
        <div>Element 1</div>
    </div>
    <div class="col-md-4 col-md-push-8">
        <div>Element 3</div>
    </div>
</div>

Answer 1

如何预定义顶行并将宽度设置为 12。

在 jquery 中，您可以向每个元素添加点击元素，然后在点击时将它们附加到顶部 div。您还可以在页面加载时遍历您的点击元素以确定/设置一个数据属性，如果在已经位于顶行时再次点击它们，您可以将它们移回原来的位置。

https://jsfiddle.net/eobxja1k/5/

HTML 设置:

<div class="row" id="myContainer">
  <div class="col-8 offset-3" id="topRow"></div>
  <div class="col-4" id="bottomRow1">
    <div class="clickMe">Element 2</div>
        <div class="clickMe">Element 3</div>
    </div>
    <div class="col-8" id="bottomRow2">
        <div class="clickMe">Element 1</div>
    </div>
</div>

JQUERY:

$(document ).ready(function() {
    $('.clickMe').each(function() {
      $(this).attr('data-original', $(this).parent().attr('id'));
    });
});

$('.clickMe').click(function(){
  if($(this).parent().attr('id') != 'topRow'){
    $(this).appendTo('#topRow');
  } else {
    $(this).appendTo('#' + $(this).data('original'));
  }
});

CSS:

#topRow {
  color: white;
  color: black;
}

#bottomRow1 {
  background: blue;
  color: white;
  min-height: 25px;
}

#bottomRow2 {
  background: green;
  color: white;
  min-height: 25px;
}