Возможно ли решить задачку?
 

Сразу к задаче, дамы и господа.
Имеется структура:

<header class="hidden-phone">
  <h1 class="logo" .. />
  <div>
    <nav class="pages" ../>
    <div id="search" />
  </div>
  <div class="phone" />
  <div class="login" />
  <nav class="category" ../>
</header>

Как заставить некоторые блоки или целые куски html кода перетаскивать?
На пример, что бы структура выше при просмотре на моб. устройствах или таблетках, было типа такого:

<div class="visible-phone">
<nav class="pages+category+login" />
<header>
  <h1 class="logo" />
  <div class="tools" />
</header>
<div id="search"  />

Силами css, не знаю как это сделать, дублировать контент, что бы скрывать их: пк/моб. устройства - не вариант. Ибо в результате контент будет повторяться.

Вообще-то как раз силами css и надо (mediaqueries). Если отличия незначительные - то вполне справитесь, если разительные - то либо гемор в бекэнде устраивать, либо (в идеале) - мобильная версия на поддомене

Так вот в чем и соль. блок <nav class="pages" ../> , который находится внутри header и div , а так же <nav class="category" ../>, который находится в header нужно или вместе соединить или вообще убрать из header'a.
Неужели js не может манипулировать блоками html и перемещать их? Ну или скажите пожалуйста, как роботы отнесутся к дублирующему контенту? Хочу просто сделать бесплатную тему для одного интернет магазина.

Может, конечно, манипулировать. Для jquery есть, например, appendTo, другое дело, что такой подход не очень распространён