我想构建如下所示的导航布局，其中我有 nav1 - logo - nav2 ，如下所示：LAYOUT EXAMPLE
问题：在wordpress上我有以下布局，我试图让css（flexbox）工作。
笔记本电脑屏幕目前，.site-branding div位于左侧，而.main-navigation导航栏位于右侧。 虽然笔记本电脑屏幕上的布局应为navigation one | logo | navigation two（如示例布局中所示）
这是一个截屏... https://imgur.com/a/16l6a
平板电脑屏幕，导航设置在顶部，而徽标位于中间，导航设备2位于底部...就像这样https://imgur.com/a/QE4Pw，标识应该是第一个，然后两个导航应该在并排下面的行
我认为问题出在flex命令属性上？或者我的媒体查询是否继承了不应该的样式？我已经检查了这个，但我不确定发生了什么，帮助。
请帮忙
HTML
<header id="masthead" class="site-header">
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle">Primary Menu</button>
<div class="menu-primary-menu-links-container"><ul id="primary-menu" class="menu"><li id="menu-item-167" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167"><a href="http://localhost/wordpress/home/">Home</a></li>
<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://localhost/wordpress/about/">About</a></li>
<li id="menu-item-1987" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1987"><a href="http://localhost/wordpress/gallery/">Gallery</a><button class="dropdown-toggle" aria-expanded="false"><span class="dropdown-symbol">+</span><span class="screen-reader-text">Expand child menu</span></button>
<ul class="sub-menu">
<li id="menu-item-1988" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1988"><a href="http://localhost/wordpress/book-a-workshop/">Book A Workshop</a></li>
</ul>
</li>
</ul></div> </nav><!-- #site-navigation -->
<div class="site-branding">
<div class="site-branding-text">
<p class="site-title"><a href="http://localhost/wordpress/" rel="home">Treehouse</a></p>
<p class="site-description">Its an awesome website</p>
</div>
</div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle">Primary Menu</button>
<div class="menu-primary-menu-links-container"><ul id="primary-menu" class="menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167"><a href="http://localhost/wordpress/home/">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://localhost/wordpress/about/">About</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1987"><a href="http://localhost/wordpress/gallery/">Gallery</a><button class="dropdown-toggle" aria-expanded="false"><span class="dropdown-symbol">+</span><span class="screen-reader-text">Expand child menu</span></button>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1988"><a href="http://localhost/wordpress/book-a-workshop/">Book A Workshop</a></li>
</ul>
</li>
</ul></div> </nav><!-- #site-navigation -->
</header>
CSS
/*--------------------------------------------------------------
# HEADER
--------------------------------------------------------------*/
.site-header {
position: relative;
padding: 2rem 1rem;
font-family: 'Merriweather', sans-serif;
color:black;
background-color: #fff;
font-size: 0.9rem;
}
@media screen and (min-width: 1080px) {
/* HEADER */
.site-header {
flex-wrap: nowrap;
flex-direction: row-reverse;
}
}
.site-branding {
min-height: 65px;
}
.site-title {
margin: 0;
padding: 0;
font-size: 1.6rem;
font-weight: 900;
line-height: 1rem;
}
.site-title a {
color: black;
text-decoration: none;
}
.site-title a:hover, .site-title a:focus {
text-decoration: underline;
}
.site-description {
margin: 0;
font-size: .9rem;
font-style: italic;
font-weight: 100;
}
/* Custom Header Image - Uploaded in Customizor */
.header-image {
margin: 0;
max-height: 60vh;
overflow: hidden; /* Max height of 60vh will make the image overflow and so we crop it off */
}
.header-image img {
display: block;
width: 100vw /* Image to stretch full view port */
}
/* Custom Logo Image */
.custom-logo-link img {
display: block;
height: 65px;
width: auto;
margin-right: 1rem;
} /* ./end */
.site-branding-text {
display: flex;
flex-direction: column;
justify-content: center;
height: 65px;
}
@media screen and (min-width: 601px) {
.site-header {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.site-branding {
text-align: center;
flex:1 100%;
/*flex: 1 0 auto; */
/*Grow to 1 in size, 0 it should NOT shrink in size when the screen is smaller (i.e. squeesh with navigation), auto - the site of container is whatever the size content in it is*/
}
#site-navigation {
margin: auto;
}
.main-navigation ul {
/*flex-wrap: nowrap;*/
}
}
@media screen and (min-width: 900px) {
.main-navigation ul {
flex-wrap: nowrap;
}
.site-branding {
flex:0;
}
}
@media screen and (min-width: 1080px) {
html {
font-size: 20px;
}
.site-branding {
order: 1;
}
/*Navigation Laptop*/
.nav2 {
order:0;
}
.nav1 {
order:1;
}
}