Переместить блок в мобильной версии на JQuery / ~#root -i Переместить блок в мобильной версии на JQuery / ~#root -i Переместить блок в мобильной версии на JQuery / ~#root -i Переместить блок в мобильной версии на JQuery / ~#root -i Переместить блок в мобильной версии на JQuery / ~#root -i Переместить блок в мобильной версии на JQuery / ~#root -i Переместить блок в мобильной версии на JQuery / ~#root -i Переместить блок в мобильной версии на JQuery / ~#root -i
  • RU
  • UA
  • EN
  • Создать интернет-магазин
  • Документация
  • Блог
    • Unix-подобные ОС
    • Php
    • MySQL
    • JavaScript
    • Менеджеры пакетов
    • Docker
    • Seo
  • Вспомогательные сервисы
    • Короткие ссылки
    • Oбмен просмотрами YouTube
  • Вход
  • Регистрация
  • Главная
  • JavaScript
  • Переместить блок в мобильной версии на JQuery

Переместить блок в мобильной версии на JQuery

Бывают ситуации, когда на сайте есть блок, который на десктопной версии расположен в одной очередности, но в мобильной версии его очередность нужно нарушить. Не всегда есть возможность переверстать под 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"

Данные код сработает только на мобильной версии сайта. На версии для десктопа пользователь этого не увидит.

root-i
02 Февраля 20
1073
0
Теги
JavaScript JQuery
Поделиться

Комментарии

wlad2.ru

11 Января 2022 11:27
Чтобы убрать ошибку Uncaught TypeError: $ is not a function
правильный код вот

$(window).on('load resize', function(){
if ($(window).width() < 768) {
$('#cut_col-sm-12').insertAfter('#insert_cut_col-sm-12');
}
});
1
Имя
Электронная почта
Рейтинг
Отзыв

Другие статьи из категории

01 Апреля 2021

В input только числа на js

Простой скрипт на JS, фильтрация ввода информации в input. Ввод только чисел.

29 Января 2019

Gulp Error watch path ENOSPC в gaze.js или grunt.js

Рассмотрим возможность решения проблемы при запуске Gulp в Ubuntu 18.04 с ошибкой Error: watch /path/ ENOSPC. Разберем, что такое параметры max_user_watches.

21 Мая 2018

Подсветка кода на сайте средствами Js и Css

Описывая минимальные коды, у которых синтаксис похож на С++, возможно потребуется его минимальная подсветка на сайте для лучшей читаемости. Я приведу самый простой способ подсветка, который взял с habrahabr. Рассмотрим, подключим, опишем...

Категории

  • Unix-подобные ОС
  • Php
  • MySQL
  • JavaScript
  • Менеджеры пакетов
  • Docker
  • Seo

Теги

Ubuntu 14.04 (17) Софт (11) Gearman (3) Сервисы (2) Framework (1) MVC (1) Php 5.6 (16) Cli (3) Propel (3) ORM (3) JavaScript (5) Css (1) Composer (4) Docker (3) Seo (4) MySQL (5) docker-compose (2) CentOS (1) 1С (1) Memcache (1) Memcached (1) Php 7 (6) Анализ (2) Ubuntu 18.04 (13) MySQL 5.7 (4) Генерация (2) Bower (1) Npm (1) NodeJs (3) Gulp (1) ImageCMS (2) Базы (1) JQuery (1) Сниппет (1) Apache (1) Cron (1)

Последние комментарии

alex, я вижу 2 причины почему так может быть. Не в...
root-i
04.07.22
Сделал все так как написано в статье, не работает.
alex
04.07.22
Как вариант это может происходить из-за неизвестно...
root-i
21.01.22
Чтобы убрать ошибку Uncaught TypeError: $ is not a...
wlad2.ru
11.01.22

Делюсь информацией в которой я требовал помощи и разбираясь затрачивал много времени. Если информация помогла хотя бы одному человеку, значит этот сайт создан не зря.

Благодарность, на продолжение работы сайта:
Контакты

Telegram Viber Mail

Поиск по сайту

  • Вход
  • Регистрация

Сайт работает на chmod -R