Как поменять два блока местами?

Пару раз сталкивался с тем, что надо поменять 2 блока местами при нажатии на кнопку или при определенной ширине. Для этого в первую очередь нужно подключить jquery.

Пример:

See the Pen Swap Blocks by Aleksandrs (@CoolS2) on CodePen.0

Разбор кода:

Создаем кнопку, при нажатии будет срабатывать наш скрипт и создаем пару блоков, внутри блоков пишем заголовок и рандомный текст ( для удобства подключаем bootstrap ).

<button>Swap blocks</button>
    <div class="row">
      <div class="col-md-6">
        <div class="inside-block left">
          <h3>Hello</h3>
          <p>Lorem ipsum (LEFT BLOCK)</p>
        </div>
      </div>
      <div class="col-md-6">
        <div class="inside-block right">
          <h3>Bye</h3>
          <p>Lorem ipsum (RIGHT BLOCK)</p>
        </div>
      </div>
    </div>
	

Прописываем им стили так, чтобы они друг от друга отличались, в данном примере мы делаем границы блоков разного цвета (для наглядности)

h3{
  font-size:18px;
  text-transform: uppercase;
}
p{
  font-size: 14px;
}
.inside-block{
  padding: 15px;
  border: 3px dashed;
}
.left{
  border-color: #0c7fd7;
}
.right{
  border-color: #fab23a;
}

И теперь сам скрипт. В первую очередь, мы создаем функцию для jquery, которую можно будет в дальнейшем использовать как обычный триггер

$('button').on('click', function(){
  $('.left').swap('.right');
});

Создаем переменные, записываем в каждый информацию выбранного блока и меняем их местами

  

jQuery.fn.swap = function(b) {
    b = jQuery(b)[0];
    var a = this[0],
        a2 = a.cloneNode(true),
        b2 = b.cloneNode(true),
        stack = this;

    a.parentNode.replaceChild(b2, a);
    b.parentNode.replaceChild(a2, b);

    stack[0] = a2;
    return this.pushStack( stack );
};

Вот и все, теперь каждый раз, когда нам нужно поменять местами блок, мы можем использовать .swap

Реальный пример

У меня было так что на сайте, было 2 колонки с выпадающим списком. (к примеру как в гугл переводчике), где ты хочешь перевести с одного языка на другой, а потом наоборот, и есть кнопка быстрый свап, и тогда не надо каждый раз искать нужный вариант в выпадающем списке

Или вот такой пример:

Если у вас есть вопросы или возможно у вас есть варианты получше, я буду рад, если вы поделитесь им в комментариях с подробным описанием.