如何在大屏幕上将列调整为100％高度，并使用flexbox在移动设备上重新排序列

Question

我正在尝试使用flexbox构建新标头。移动和大屏幕标题版本有点不同，这导致冲突，我不能让它工作。

• 徽标在大屏幕上不应有任何顶部填充或边距。
• 带有购物车的菜单2应在移动屏幕上用徽标分隔。

是否可以使用flexbox构建此类场景？

标题图：

<h1>Mobile header</h1>
<div class="container">
    <div class="box logo"><span>LOGO</span></div>
    <div class="box menu-2"><span>Menu 2</span></div>
    <div class="box cart"><span>Cart</span></div>
</div>

<h1>Large screen header</h1>
<div class="container">
    <div class="box logo large"><span>LOGO</span></div>
    <div class="box menu-1 large"><span>Menu 1</span></div>
    <div class="box menu-2 large"><span>Menu 2</span></div>
    <div class="box cart large"><span>Cart</span></div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.logo { order: 1;}
.menu-2 { order: 0;}
.cart { order: 3;}

.logo.large{ order: 0; flex-basis: calc(10%);}
.menu-1.large { order: 1; flex-basis: calc(90%);  }
.menu-2.large { order: 2; flex-basis: calc(80%);  }
.cart.large { order: 3; flex-basis: calc(10%); }

.box {
    background-color: lightgreen;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    padding: 10px;
    border: 1px dashed black;
}
h1 {
  text-align: center;
  width 100%;
  font-size: 1em;
  padding: 10px;
  margin-bottom: 10px;
  font-style: italic;
}

CODEPEN