Как переместить блок в другое место при изменении ширины экрана
Скрипт поможет переместить блок с любой информацией в другое произвольное место при изменении ширины экрана.
Допустим в десктопной версии сайта есть блок с классом widget_menu_sidebar, в мобильной версии сайта, информацию в данном блоке нужно переместить в другое место. В примере это новый блок с классом new-widget_menu_sidebar.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> if(matchMedia) { const mq = window.matchMedia("(min-width: 900px)"); mq.addListener(WidthChange); WidthChange(mq); } function WidthChange(mq) { if(mq.matches) { jQuery('.new-widget_menu_sidebar').html(''); jQuery('.widget_menu_sidebar').css("display", "block"); } else { var cn = jQuery('.widget_menu_sidebar').html(); jQuery('.new-widget_menu_sidebar').html(cn); jQuery('.widget_menu_sidebar').css("display", "none"); } } }); </script> |
|
1 2 |
<div class="widget_menu_sidebar">отсюда берем</div> <div class="new-widget_menu_sidebar">сюда перемещаем</div> |