将侧边栏从左向右移动

Question

我正在尝试将菜单侧边栏从左侧移到右侧。对.main侧边栏和.main(内容(的更改将浮动值向左/向右交换，从而中断菜单。

这是一个演示页面https://demo.competethemes.com/?theme=author

@media all and (min-width: 59.375em) {
.main-sidebar {
float: right;
width: 27.775%;
padding: 3em 1.85185%;
min-height: 100%;
}
@media all and (min-width: 59.375em) {
.main {
float: left;
padding: 3em 5.555%;
width: 72.215%;
}

有什么想法吗？！

Answer 1

看起来最简单的方法是使用transform来镜像布局。

您可以在任何其他CSS规则/文件之后加载这部分CSS：

@media all and (min-width: 59.375em) {
body, 
#main-sidebar, 
#main ,
footer.site-footer[role="contentinfo"] {
transform:scale(-1,1)
}
}

如果你想看看它的作用，添加一个延迟的转换：

@media all and (min-width: 59.375em) {
body, 
#main-sidebar, 
#main ,
footer.site-footer[role="contentinfo"] {
transform:scale(-1,1);
transition:1s 1s
}
}

Answer 2

将以下命令复制到全局css字段。不要在@media中复制

.main-sidebar{
float:right;
}

我希望你的问题得到解决