Изменение порядка делений, когда разрешение ниже определенного количества пикселей

Question

То, чего я пытаюсь достичь, более или менее упрощенно. Это работает так, что блоки содержимого будут меняться в зависимости от того, с какого разрешения вы просматриваете веб-страницу.

Сейчас я проверяю через jQuery, соответствует ли разрешение нужному требования. Допустим, ширина экрана меньше 1200, мой код будет таким:

if ($(window).width() < 1200) {
    $("#spanInfo").appendTo(".page-heading");
    $(".maintenance-img").insertAfter(".maintenance-title");
    $(".experience-shop-img").insertBefore(".experience-shop");
}  

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

Любая помощь приветствуется. Спасибо!

Answer 1

Вы можете использовать окно при изменении размера:

$(window).on('resize', function(){
  var win = $(this); //this = window
  if (win.height() >= 820) { /* ... */ }
  if (win.width() >= 1280) { /* ... */ }
});

Надеюсь, это поможет