Бывают ситуации, когда на сайте есть блок, который на десктопной версии расположен в одной очередности, но в мобильной версии его очередность нужно нарушить. Не всегда есть возможность переверстать под flex и задать это стилями. Разберем вариант на js вместе с jquery.
Допустим есть список:
<ul>
<li>text</li>
<li id="cut" style="color:red">Это нужно перенести в под обозначенные тег в мобильной версии</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li id="insert" style="color:green">Переместить под этот тег</li>
<li>text</li>
</ul>
Код перемещающий нужный блок в зависимости от размера экрана у устройства:
$(window).on('load resize', function(){
if ($(window).width() < 768) {
$('#cut').insertAfter('#insert');
}
});
load resize - при загрузке или изменении размера экрана
width() < 768 - размер экрана при котором это срабатывает
insertAfter() - тег id="cut" вставляем после id="insert"
Данные код сработает только на мобильной версии сайта. На версии для десктопа пользователь этого не увидит.
Описывая минимальные коды, у которых синтаксис похож на С++, возможно потребуется его минимальная подсветка на сайте для лучшей читаемости. Я приведу самый простой способ подсветка, который взял с habrahabr. Рассмотрим, подключим, опишем...
Рассмотрим возможность решения проблемы при запуске Gulp в Ubuntu 18.04 с ошибкой Error: watch /path/ ENOSPC. Разберем, что такое параметры max_user_watches.
Простой скрипт на JS, фильтрация ввода информации в input. Ввод только чисел.
wlad2.ru
правильный код вот
$(window).on('load resize', function(){
if ($(window).width() < 768) {
$('#cut_col-sm-12').insertAfter('#insert_cut_col-sm-12');
}
});