Как можно сделать следующую адаптивную структуру?

Question

[Дмитрий]

Как можно сделать адаптивную структуру используя минимум js



пробовал отталкиваться от этого, но зашел в тупик

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul li {
   width: 33%;
   float: left;
   height: 100px;
}

@media (max-width: 1000px) {
ul li {
    width: 50%;
}
}

Comments

[WebDev]

В чем тупик?

[Дмитрий]

в том что у каждого li есть свой блок с описанием
при наведении на li этот блок должны появиться и при этом отодвинуть нижний ряд
при этом сам блок описания должен быть на всю ширину страницы

[WebDev]

Действительно проще всего дописать пару строк жс. На чистом css простого решения в голову не приходит. Может я чего то не знаю

Answer 1

[Евгений Петров]

Используем отрицательный margin, волшебный :nth-child и магию цифр.

Answer 2

[Алексей Рытиков]

codepen.io/anon/pen/bdwxYm

Answer 3

[Петр Петров]

На js

Главную роль играют правые отступы в CSS.

Comments

[Дмитрий]

идеально!