Html 在移动屏幕中将侧导航栏移到右侧

我有一个页面，它有一个侧边栏来打开不同的页面。它在宽屏幕上正常工作，将侧边栏移动到右侧，但当我在移动屏幕上尝试此操作时，侧边栏将移动到小屏幕。请，我需要帮助，使其在宽屏幕和移动屏幕的右侧工作

下面是我的网页的HTML和CSS

我在网上搜索过，但没有找到任何解决办法。从我的角度来看，我试图用HTML改变页面的方向，但它不起作用

/*CSS文档*/
身体{
背景色：#599cff；
字体系列：无衬线、Arial、Helvetica；
/*方向：rtl*/
/*字体系列：时代新罗马*/
}
.线路{
宽度：100%；
高度：1px；
边框底部：1px实心#47748b；
/*保证金：5px0*/
}
#边栏{
字体系列：无衬线；
溢出：隐藏；
z指数：3；
/*方向：rtl*/
/*高度：100vh*/
/*溢出y：滚动*/
}
#侧边栏h3{
字体大小：.8em；
颜色：#F0F8FF；
文本转换：大写；
}
h6{
文本转换：大写；
颜色：#A9A9；
字体大小：.7em；
字体大小：粗体；
}
#侧栏.列表组{
最大宽度：300px；
背景色：#006666；
/*#333;*/
最小高度：100vh；
}
#边栏一{
右边距：6px；
}
#侧栏。列出组项{
边界半径：4；
背景色：#006666；
/*#333;*/
颜色：#F0F8FF；
/*#333；#ccc*/
左边框：0；
右边界：0；
边界顶部：0；
字体大小：.9em；
/*边框颜色：0d8686；#2C2C*/
#F0F8FF空间：nowrap；
}
#侧栏。列表组项：悬停{
背景色：#F0F8FF；
颜色：#333；
}
/*突出显示活动菜单*/
#侧栏。列表组项：未（.collapsed）{
背景色：#73abab；
/*#222;*/
/*边框颜色：#99cccc；#006666*/
}
/*封闭状态*/
#sidebar.list group.list组项[aria expanded=“false”]：：之后{
内容：“\f0d7”；
字体系列：Fontsome；
显示：内联；
文本对齐：右对齐；
左侧填充：5px；
}
/*开放状态*/
#侧栏.列表组.列表组项[aria expanded=“true”]{
背景色：#006666；
/*#222;*/
颜色：#F0F8FF；
/*边框颜色：#99cccc*/
}
#sidebar.list group.list group项[aria expanded=“true”]：：之后{
内容：“\f0da”；
字体系列：Fontsome；
显示：内联；
文本对齐：右对齐；
左侧填充：5px；
}
/*一级*/
#侧栏.列表组.折叠.列表组项，
#侧栏.列表组.折叠.列表组项{
左侧填充：20px；
}
/*二级*/
#侧边栏.list group.collapse>.collapse.list group项，
#侧边栏.list group.collapse>.collapsing.list group项{
左侧填充：30px；
}
/*三级*/
#侧栏.列表组.collapse>.collapse>.collapse.list组项目{
左侧填充：40px；
}
@介质（最大宽度：768px）{
#边栏{
最小宽度：35px；
最大宽度：40px；
溢出y：自动；
溢出x：可见；
过渡：所有0.25秒缓解；
转换：translateX（-45px）；
/*位置：固定*/
}
#边栏显示{
变换：translateX（0）；
}
#侧栏：：-webkit滚动条{
宽度：0px；
}
#侧边栏，
#侧栏.列表组{
最小宽度：35px；
溢出：可见；
}
/*在小屏幕上覆盖子级别*/
#侧栏.列表组.collapse.show，
#侧边栏。列表组。正在折叠{
位置：相对位置；
z指数：1；
宽度：190px；
排名：0；
}
#侧边栏.列表组>.列表组项目{
文本对齐：居中；
填充物：75雷姆。5雷姆；
}
#侧边栏h3{
字体大小：.50em；
}
/*折叠时隐藏顶级插入符号图标*/
#侧边栏.list group>.list group项[aria expanded=“true”]：：之后，
#侧边栏.list group>.list组项[aria expanded=“false”]：：之后{
显示：无；
}
}
.表演{
能见度：可见；
}
.崩溃{
能见度：可见；
身高：0；
-webkit转换属性：高度、可见性；
/*-moz过渡属性：高度、可见性*/
过渡特性：高度、可见性；
-webkit过渡计时功能：缓解；
过渡定时功能：缓解；
}
.折叠.宽度{
-webkit转换属性：宽度、可见性；
/*-o-过渡特性：宽度、可见性*/
过渡特性：宽度、可见性；
宽度：0；
身高：100%；
-webkit过渡计时功能：缓解；
过渡定时功能：缓解；
}
.语言{
浮动：对；
文本对齐：居中；
线高：41px；
高度：40px；
位置：相对位置；
字体系列：“Conv_STC-Regular”；
光标：指针；
页边顶部：-1px；
}

引导侧导航条
使用者
沙特发展与出口服务有限公司。

仪表板







水平可折叠

克拉斯·胡斯托·奥迪奥，空调设施在，埃格斯塔斯·埃格特