Konflikt W Wersji Mobilnej I Desktopowej Przy Responsywnym Designie

[axlpl]

hej tnę właśnie desing responsywny i mam taki problem przy obecnej strukturę na desktopach maja być zakładki

getbootstrap.com/javascript/#tabs

lecz na wersji mobilnej mają się zrobić slidy

getbootstrap.com/javascript/#collapse

czy jestem wstanie uzyskać to na takiej samej strukturę?

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
 
<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

nie musi być ten collapse z bootstrapa ale nie ogarniam jak zrobić z tej struktury na responsywna taką

<ul class="nav nav-tabs">

<li class="active"><a href="#home" data-toggle="tab">Home</a>

<div class="tab-pane active" id="home">...</div>

</li>

<li><a href="#profile" data-toggle="tab">Profile</a>

<div class="tab-pane" id="profile">...</div>

</li>

<li><a href="#messages" data-toggle="tab">Messages</a>

<div class="tab-pane" id="messages">...</div>

</li>

<li><a href="#settings" data-toggle="tab">Settings</a>

<div class="tab-pane" id="settings">...</div>

</li>

</ul>

[code]

ponieważ inaczej sobie tego nie wyobrażam żeby później każdy ul > li dawać absolute żeby dane zakładka była nad dana treścią...

chyba zęby zastosować takie coś w 2 strukturach czyli praktycznie powielanie treści strony a nie kodu, i na desktopach dać mobile hide ten collapse a na collapse dać desktop hide, ale jak się ma takie z duplikowana treść pod względem seo?