Как лучше сверстать такой блок?

Question

[vovkka]

Добрый день. Имеется такой блок в шапке

При определенной ширине телефоны должны превратиться в единую иконку телефон, и при клике выпадать плашка с телефонами.
Вопрос в том, как лучше сделать: либо внутрь текущего блока с телефонами спрятать блок с иконкой и показывать, плюс спрятать выпадашку, либо сверстать еще один блок, тогда будет дубляж кода, но тогда нечего мудрить не придется.

Спасибо!

Comments

[Андрей Токмаков]

Вы б нарисовали как точно выглядеть должно это и было бы более понятней как сделать

[vovkka]

Андрей Токмаков: то что в шапке сейчас блок с телефонами и иконками, должен исчезнуть и на его месте появиться иконка телефона. при клике на нее, грубо говоря должно появиться в выпадашке (куда ведет стрелка) то, что исчезло.

Answer 1

[Николай]

Если используешь boostrap, есть классы hidden-sm и *-xs для подобных манипуляций, чтобы один блок скрыть на нужных размерах, а другой показывать только на устройствах от md размеров к примеру. Можешь использовать список ul, все элементы внутри li>a стилизируй как хочешь, используя медиа запрос обращайся к нужному элементу по nth-child и скрывай, то что тебе необходимо. Вариантов много.