Как исправить баг с медиазапросом?

Question

[Роман Серков]

Делаю адаптивное меню и столкнулся с вот такой проблемой: на span ставлю display: none; , а на @media only screen and (max-width : 1200px) display: block; и спан пропадает на всех екранах
HTML

<div class='head_mnu'>
							<div class="row">
								<div class="col-md-8">
									<span class="logo-menu"><a href="#">Menu</a></span>
									<ul>
										<li><a href='#'>Главнвя</a></li>
										<li><a href='#'>sony vegas pro шаблоны</a></li>
										<li><a href='#'>Блог</a></li>
									</ul>
								</div>
								<div class="col-md-4">
									<form method="_POST" name="search" >
										<input type="text" name="search" placeholder="Search"><input type="submit" name="search_button" value="  ">
									</form>
								</div>
							</div>
						</div>

CSS

.head_mnu .logo-menu a{
	display: none;
	text-transform: uppercase;
	color: #fff;
	margin-left: 5px;
	text-decoration: none;
}

@media only screen and (max-width : 1200px) {


	.head_mnu ul , form input{
		display: none;
	}

	.head_mnu .logo-menu a{
		display: block; 

	}


}

пробовал разные вариации селекторов , ставил !important, скрывал на >1200 и показывал на <1200 ничего не помогает, может кто сталкивался или предполагает в чем проблема.
Пишите любые догадки.
Зарание спасибо)

Comments

[Otrivin]

А очередность стилей соблюдаете?

Answer 1

[Максим]

Вы наверно медиа подключаете/прописываете перед основными стилями. Вот так работает (медиа после основных стилей):
https://jsbin.com/leqoxev/1/edit