jQuery UI Sortable Bootstrap Адаптивная сетка

Question

У меня есть набор div col-md-12 и col-md-6 в контейнере.Я хотел бы перетащить 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
});