Адаптивный переброс элемента

Было такое когда карточка товара была сложно сверстана. Решается все связкой Javascript / jQuery плюс 4 момента:

1. Проверяем с помощью JS $(window).width() и определяем порог(и) переброса.
2. Привязываемся к событию $(window).resize() чтобы учитывались возможные ситуации с изменением ширины экрана (например, клиент перевернул устройство).
3. Используем jQuery-метод detach() для удаления элемента из DOM с сохранением связанных с ним данных и обработчиков событий (в отличие от remove()).
4. Используем jQuery-метод append() или appendTo() для переброса элемента в новое местоположение.

Реализация примерно такая:

jQuery(function($) {

  var element = $('span#element_id'),
  target = $('div#target_id'),
  source = $('div#source_id'),
  breakpoint = 768;

  function moveElement() {
    // var element_clone = element.clone(true);
    if (($(window).width() >= breakpoint)) {
      // Screen out of limits
      if (element.parent() !== target) {
        element.detach().appendTo(target);
      }
    } else {
      // Screen within limits
      if (element.parent() !== source) {
        element.detach().appendTo(source);
      }
    }
  };

  // Run on load & resize
  $(window).resize(moveElement);
  // Initial call to check element location on load
  moveElement();
});

Надо просто проверку делать каждый раз на присутствие элемента в контейнере чтобы они не плодились. И в моем варианте кроме проверки $(window).width() была еще проверка на наличие в DOM общего родительского элемента, поскольку функция должна была работать только на определенной странице.

Благодарю за помощь! Функция это то, что и требовалось. Один вопрос: читал что если обрабатывается resize, то load уже не требуется. Это так?

Главное в этой ситуации - не оказаться в глупом положении и доказывать заказчику или самому себе что ты все делал правильно, а на выходе получилось не очень.