Javascript 引导导航栏在小屏幕上显示

我希望实现简单的功能，但在任何引导文档或在线任何地方，我似乎都不是一个好的解决方案。我想在引导中创建一个位于屏幕左侧的导航栏。当屏幕尺寸较小时，我希望导航栏位于屏幕顶部。如何做到这一点？理想情况下，我希望严格通过HTML或CSS实现这一点

引导不支持左对齐导航栏。但是你可以通过媒体查询很容易地制作一个。下面是一个简单的例子：

/*移动默认设置为左对齐*/
navbar先生{
位置：固定；
左：0；
排名：0；
显示：内联块；
宽度：50px；
身高：100%；
}
.导航栏项目{
/*移动设备上垂直显示的导航栏项目*/
显示：块；
}
@媒体屏幕和屏幕（最小宽度：480px）{
navbar先生{
/*在比手机屏幕大的屏幕上，变形为顶部全宽*/
高度：50px；
宽度：100%；
}
.导航栏项目{
/*导航栏项目现在并排呈现*/
显示：内联块；
}
}

希望有帮助！如果您还有任何问题，请告诉我

编辑：下面是一个示例工作代码链接，其中包含以下代码：