Responsive header with changing the structure of elements?

Question

Layout

Hello everybody. I had a task to make the site header adaptive, but the problem is that the structure of the elements changes greatly in the adaptive. I drew in the picture as it is on the desktop and how to arrange the elements on the tablet version. At the moment, I just copied the block with the main menu in the code and display it only on the tablet, but the trouble is that the same main menu appears twice in the code and search engines will not approve of this, but it’s important for me to sit normally in search engines. Can you imagine how you would solve this problem without code duplication?

Answer 1

Previously, the code was duplicated or js-magic was embodied :)
But now there are CSS chips: anddisplay: flex;order:1;