Логотип внутри меню

[anvyd]

Хочу сделать логотип межу пунктами меню как на изображении
http://storage9.static.itmages.ru/i/15/0830/h_1440960187_5020454_95be8f1766.jpg

Но не до конца понимаю как это все сделать грамотно.
У меня есть два варианта, как это реализовать.
 

<header> <nav>  <ul class="navigation">   <li><a href="#">Пункт меню</a></li>   <li><a href="#">Пункт меню</a></li>   <li><a href="#">Пункт меню</a></li>   <li><a href="/" class="logo"><img src="" alt=""></a></li>   <li><a href="#">Пункт меню</a></li>   <li><a href="#">Пункт меню</a></li>   <li><a href="#">Пункт меню</a></li>  </ul> </nav></header><header> <nav>  <ul class="navigation">   <li><a href="#">Пункт меню</a></li>   <li><a href="#">Пункт меню</a></li>    <li><a href="#">Пункт меню</a></li>   <li><a href="/" class="logo"></a></li>   <li><a href="#">Пункт меню</a></li>   <li><a href="#">Пункт меню</a></li>   <li><a href="#">Пункт меню</a></li>  </ul> </nav></header>

Либо сделать одним из пунктов ссылку и в нее вставить картинку, либо ссылке установить бэкграунд и туда вставить картинку логотипа?

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

на маленький устройствах я бы хотел, чтобы была такая верстка
 

<header> <a href="" class="logo"><img src="" alt=""></a> <nav>  <ul class="navigation">   <li><a href="#">Пункт меню</a></li>   <li><a href="#">Пункт меню</a></li>   <li><a href="#">Пункт меню</a></li>   <li><a href="#">Пункт меню</a></li>   <li><a href="#">Пункт меню</a></li>   <li><a href="#">Пункт меню</a></li>  </ul> </nav></header>

Или мне надо создать сразу эту ссылку и установить ей свойство "display: none?" и наоборот, но мне кажется это как то глупо

[Jack_V]

<header>  <a href="" class="logo"><img src="" alt=""></a>  <nav>    <ul class="navigation">      <li><a href="#">Пункт меню</a></li>      <li><a href="#">Пункт меню</a></li>      <li><a href="#">Пункт меню</a></li>      <li><a href="/" class="logo"><img src="" alt=""></a></li>      <li><a href="#">Пункт меню</a></li>      <li><a href="#">Пункт меню</a></li>      <li><a href="#">Пункт меню</a></li>    </ul>  </nav></header>

Да все вы правильно думаете. Не вижу ничего "глупого" тут. 

Хотя можно и через flexbox менять местами элементы не трогая верстку.

Только img закрывайте.