Tengo un sitio escrito usando Twitter Bootstrap. Tengo un grupo de botones en el sitio que deseo colapsar pero solo cuando el sitio se ve en un teléfono. Entonces, cuando un usuario esté viendo el sitio en su computadora, verá todos los botones, pero cuando estén en el teléfono, solo verán un botón que dice algo así como "más detalles" y cuando lo presionen, todos los botones aparecerán.

Hasta ahora tengo:

<div class="collapse-group">
  <ul class="menu row collapse" id="IndustriesMenu">
    <li><a class="btn" href="#">Button 1</a></li>
    <li><a class="btn" href="#">Button 2</a></li>
    <li><a class="btn" href="#">Button 3</a></li>
  </ul>
  <a class="btn" data-toggle="collapse" data-target="#IndustriesMenu">View details</a>
</div>

Esto funciona actualmente, pero los botones están colapsados ​​de forma predeterminada en todos los dispositivos, no solo en los teléfonos. Cualquier ayuda es siempre apreciada. Gracias.