Сделать div collaspible в блок значков

Question

Я пытаюсь сделать развал div в значок при достижении определенной ширины экрана. Это почти как отзывчивое меню в Drupal, но для div.

Я планирую использовать jQuery и CSS для выполнения этого, если нет более элегантного способа (например, для модуля Drupal 8, который сделает это).

Мне интересно, как вы это сделаете, но я отправлю свой путь в ответах.

UPDATE: Главный недостаток этих обстоятельств Я не могу редактировать HTML ... без jQuery. У меня есть только мой div, и мне нужно вставить значок триггера через jQuery. (Для пользователей Drupal, я с помощью Drupal и выбрать область, которая содержит два блока.)

Answer 1

Мой путь, не до совершенства еще, основан на следующем JQuery:

var menuIcon = function() { 
    if ($(window).width() < 750) { 
     $(".DIV-CLASS").unwrap(); 
     $(".menu-icon").remove(); 
     $(".DIV-CLASS").children().wrapAll("<div class='menu-wrapper' />") 
     $(".DIV-CLASS").prepend('//ICON HTML'); 
    } else { 
     $(".menu-icon").remove(); 
    } 
}; 

$(document).ready(function() { 
    menuIcon(); 
}); 

$(window).resize(function() { 
    menuIcon(); 
}); 

$('.menu-icon').click(function() 
{ 
    $(".DIV-CLASS").toggleClass("open"); 
});