jQuery UI Sortable Bootstrap自适应网格

Question

我在容器中设置了col-md-12和col-md-6 div。我想将col-md-12拖到col-md-6中，并且col-md-12必须适应col-md-6的大小，反之亦然。我当前的实现很奇怪。请看看。

JS Fiddle

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<div class="container">
<div class="row" id="sortable">
  <div class="col-md-12">
      <div class="wrapper">
          <p>
          Content 1
          <a class="btn btn-primary">Button</a>
          </p>
      </div>
  </div>

  <div class="col-md-6">
      <div class="wrapper">
          <p>
          Content 2
          </p>
      </div>
  </div>

  <div class="col-md-6">
      <div class="wrapper">
          <p>
          Content 3
          </p>
      </div>
  </div>

  <div class="col-md-12">
      <div class="wrapper">
          <p>
          Content 4
          </p>
      </div>
  </div>
</div>
</div>

jQuery

$("#sortable").sortable({
    appendTo: document.body,
    cancel: "a,button",
    cursor: "move",
    cursorAt: { left: 5 },
    items: ".wrapper",
    dropOnEmpty: false,
    placeholder: "sortable-placeholder",
    revert: true
});