Top collapsible menu with media queries - css

Question

Here is a top menu:
When browser width is < 1000px, I would like to :
Hide the 3 top-right <input> fields (I achieved it with display:none in the media query)
The "Post" button now becomes a button that opens a collapsible menu with the 3 input fields now displayed one after another in a new line, like this:
But I think this would require to completely change the DOM element order with CSS / media query. Is this possible / needed here?
How would you implement such top menu collapsible menu?
* { 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"><img src="logo.png" /></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"/>
Post
</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

I would just change the position of the current menu on the media query for <1000px.
You could also create new html elements and set them to display:none until the media query is activated, and set them to display:block or whatever you wanted.
added 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"/>
Post
</div>
added 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;}
}