带有媒体查询的顶部可折叠菜单

Question

这是一个顶级菜单：

当浏览器宽度

• 隐藏右上角的 3 个 <input> 字段（我在媒体查询中使用 display:none 实现了它）
• “发布”按钮现在变成了一个打开可折叠菜单的按钮，其中 3 个输入字段现在一个接一个地显示在新行中，如下所示：

但我认为这需要使用 CSS / 媒体查询完全改变 DOM 元素顺序。这可能/需要吗？

你会如何实现这样的顶部菜单可折叠菜单？

* { margin: 0; padding: 0; }
a { text-decoration: none; }
img { border: 0; }
body { overflow: hidden; height: 100%; font-family: arial; }
#header { border-bottom: 1px solid #dedede; height: 60px; margin: 0; display: -ms-flexbox; display: -webkit-flex; display: flex; }
#topleft { border-right: 1px solid #dedede; padding: 0px; float: left; -ms-flex: 0 0 155px; -webkit-flex: 0 0 155px; flex: 0 0 155px; height:100%; }
#topmid { border-right: 1px solid #dedede; float: left; -ms-flex: 0 0 40%; -webkit-flex: 0 0 40%; flex: 0 0 40%; height:100%; transition: all 0.3s ease-in-out; }
#topright { -ms-flex: 1; -webkit-flex: 1; flex: 1; position: relative; } 
#logo { color: #ff0048; font-family: arial; font-size: 1.625em; font-weight: bold; padding-top: 14px; padding-left: 7px; }
#snif { margin-left: 0px; border: 0; margin-top: 22px; outline: 0px !important; width: calc(100% - 55px);}
#searchpng { background: #ffffff url("search.png") no-repeat left top; width: 40px; height: 30px; float:left; margin: 17 0 10 10px; }
.post { border: 1px solid #c4c4c4; padding: 5 2 5 10px; border-radius: 2px; }
#input1 { margin-left: 12px; width: calc(40% - 75px); position: relative; top:-7px; }
#input2 { margin-left: 0px; margin-top: 22px; width: calc(35% - 75px); position: relative; top:-7px; }
#input3 { width: calc(35% - 75px); position: relative; top:-7px; max-width: 230px;}
#deposer { background-color: #fb0149; color: white; padding: 6 10 5 10px; border-radius: 2px;  position: relative; top:-7px; width: 65px; display: inline-block; text-align: center; margin-left: 5px; font-size: 0.875em; font-weight: bold; }
#spacer { max-width: 15px; width: calc(100% - 552px); display: inline-block; }
@media (max-width: 1000px) { 
    #topmid { -webkit-flex: 0 0 30%; -ms-flex: 0 0 30%; flex: 0 0 30%; }
    body { overflow-y: scroll; }
}

<div id="header">
  <div id="topleft" class="unselectable">
    <div id="logo"><a href="/"><img src="logo.png" /></a></div>
  </div>
  <div id="topmid">
    <div id="searchpng"></div>
    <input type="text" placeholder="Lorem ipsum" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Lorem ipsum'" autocomplete="off" id="snif"></input>
  </div>
  <div id="topright" class="unselectable">
    <input id="input1" class="post" type="textarea" placeholder="" autocomplete="off"/>
    <input id="input2" class="post" type="textarea" placeholder="" autocomplete="off"/>
    <input id="input3" class="post unselectable" placeholder="" value="" autocomplete="off"/>
    <a href="" id="deposer">Post</a>
  </div>
</div>

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 1

我只需将当前菜单在媒体查询中的位置更改为

您还可以创建新的 html 元素并将它们设置为 display:none 直到激活媒体查询，然后将它们设置为 display:block 或任何您想要的。

添加了html：

<div id="mobile-topright" class="unselectable">
<input id="input1" class="post" type="textarea" placeholder="" autocomplete="off"/></div>
    <input id="input2" class="post" type="textarea" placeholder="" autocomplete="off"/>
    <input id="input3" class="post unselectable" placeholder="" value="" autocomplete="off"/>
    <a href="" id="deposer">Post</a>
  </div>

添加了 CSS：

@media (max-width: 1000px) { 
    #topmid { -webkit-flex: 0 0 30%; -ms-flex: 0 0 30%; flex: 0 0 30%; }
    body { overflow-y: scroll; }
    #topright {display:none;}
    #mobile-topright {margin-top:5%;
    }
    #input1, #input2, #input3 {width:60%;
    max-width:60%;
    margin:0 auto;
    padding:5px;}
    }