css - 自定义 css 重新排列移动尺寸屏幕中的标题位置

Question

我使用 wordpress oceanwp 主题来创建我的电子商务网站。我为 m 网站使用中等标题样式。但是，我希望我的手机屏幕显示不同的“最小”标题样式。

因此使用自定义 css 代码来解决此问题。但是，标题中的排列是（徽标/购物车图标/菜单）。但我期望的是重新排列它的位置（菜单/徽标/购物车图标）。

@media only screen and (max-width: 959px) {
.top-header-wrap.clr {
width: 50%;
}
.bottom-header-wrap.clr {
width: 50%;
}
div#site-header-inner {
display: flex;
}
.oceanwp-mobile-menu-icon.clr.mobile-right {
height: 100%;
line-height: 100px;
}
}

是否有任何 css 代码可以帮助我解决问题。我希望通过（菜单/徽标/购物车图标）的排列来获得我的移动尺寸屏幕的标题

谢谢！

标签： csswordpress

Answer 1

你能把现在的html代码发给他们吗

或者

你必须把这样的代码

.header{
    display: flex;
    align-items: center;
    justify-content: center;
}
.header div{margin:0 10%; text-align:center;}

<div class="header">
<div>menu</div>
<div>logo</div>
<div>Cart</div>
</div>