Машка

Цветной фон можно добавить на абсолютно позиционированный before. При изменении расширения на мобильное before поворачивается с помощью
transform: rotate(-0.25turn)
А так же меняется его положение относительно родителя.

Как вариант поиграться с пропорциям col-md-3 col-md-6 col-md-3. Так как средняя часть с текстом (если именно к нему нужно приблизить изображения) занимает 6 долей, то другими способами приблизить будет мудрёно.
Если речь идёт о небольшом приближении, то просто задать выравнивание для левых изображений по правую сторону, а для правых - по левую.

Где не работают медиа? В хроме всё ок.
Шапка едет, так как почта - это инлайн блок, а название - флекс. Размеры блоков не указаны.

Возможно с применение transition. Первый уровень сверстается без проблем, со вторым придется поколдовать.

<ul>
    <li><a href="#">Телефоны</a>
		<ul>
		  <li><a href="#">Nokia</a></li>
		  <li><a href="#">Samsung</a></li>
		  <li><a href="#">Вятка-автомат</a></li>	
		</ul>	
	</li>
    <li><a href="#">Аксессуары</a></li>
    <li><a href="#">Рингтоны</a></li>
  </ul>
  </div>

#menu{
 width: 800px;
 height: 200px;
 margin: auto;
 background: #f0f0f0;
}
#menu ul{
 list-style: none;
 padding: 0;
 margin: 0;
}
#menu li {
  float: left;
  position:relative
}
#menu li a{
 height: 50px;
 padding: 0 20px;
 background: #69c;
 color: #fff;
 float: left; 
 line-height: 50px;
 text-decoration:none;
 text-transform:uppercase;
 font-family: serif
 
}
#menu li a:hover{
background: #9af;
}

#menu li ul{
position:absolute;
top:100%;
height:0;
overflow:hidden;
transition: all .5s;
}
#menu li li{
	float:none
}
#menu li li a{
	background-color:#f63;
	float:none;
	display:block;
	white-space:nowrap
}
#menu li li a:hover{
	background-color:#f96
}

#menu li:hover ul {
height:300%; transition: all 0.5s;transform:rotate(360deg)}