根据大小在bootstrap中切换类？

Question

我知道我可以使用boostrap的hidden-*和`visible- *类来切换某些元素，但我希望做一些不同的事情。

我希望在大小减小到某一点时在单个控件上切换某些类。例如，我有一个导航元素，当sm和xs处于活动状态时，需要从垂直列表折叠为水平列表。目前，我这样做：

    <ul class="nav nav-pills nav-stacked hidden-sm hidden-xs">
      <li class="active"><a data-toggle="pill" href="#personalInfo">Personal</a></li>
      <li><a data-toggle="pill" href="#contactInfo">Contact</a></li>
      <li><a data-toggle="pill" href="#menu2">General</a></li>
      <li><a data-toggle="pill" href="#menu3">History</a></li>
    </ul>

    <ul class="nav nav-pills visible-sm visible-xs">
      <li class="active"><a data-toggle="pill" href="#personalInfo">Personal </a></li>
      <li><a data-toggle="pill" href="#contactInfo">Contact</a></li>
      <li><a data-toggle="pill" href="#menu2">General</a></li>
      <li><a data-toggle="pill" href="#menu3">History</a></li>
    </ul>

但是，维护单独的列表可能很麻烦。反正有没有做我想要的事情（最好没有javascript）？