Html Jquery移动导航栏回流

嗨，我有这个导航栏：

<div data-role="navbar" data-theme="c" >
            <ul>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                         text
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                        text
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                         text
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="fade" data-theme="b" data-icon="">
                        text
                    </a>
                </li>
            </ul>
      </div>


</div>

我需要添加一个按钮“菜单”，如果设备的屏幕太小，显示三个按钮

大概是这样的：

我知道我需要在css中添加一个规则，但我不知道如何添加

---

请，谢谢你

你可以在Twitters引导中查看他们是如何做到这一点的。基本上，您将有一个特定屏幕大小的媒体查询，并以这种方式格式化页面

事实上，你为什么不集成Twitter的引导功能，就可以得到你可能遇到的一切：

看看吧，它有你想要/需要的一切