design responsywny, koflikt dekstop a mobile Opcje

[me123]

hej tnę właśnie desing responsywny i mam taki problem przy obecnej strukturę na desktopach maja być zakładki
http://getbootstrap.com/javascript/#tabs
lecz na wersji mobilnej mają się zrobić slidy
http://getbootstrap.com/javascript/#collapse
czy jestem wstanie uzyskać to na takiej samej strukturę?
 

Kod

<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ą 

Kod

<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>

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?

Ten post edytował me123 20.03.2014, 08:52:20