How to correctly show flexbox columns outside the parent row?

Question

css

Greetings!

Example

Suppose there is a header in the form of display: flex, it has columns with different content. Attention to the column with buttons:
1. With resolution => 992px - show the buttons in the contacts_2 column.
2. If the resolution is < 992px - show the buttons in a separate last column.

How to correctly show the same content (in this case, these are buttons, but it can be text, pictures, etc.) in a flexbox grid, if at one resolution it should be in one column, and at another in another?

In the example, I implemented this by duplicating the columns, one is shown when the second is hidden and vice versa. How correct is this?

PS about display: grid - I know, the question is about flex.

Answer 1

In flex, you cannot move elements from one container to another container
. In your example, you need to either redo the structure or grids or JS, pull out the buttons and place them in another container ( https://habr.com/en/post/502028/ ) or leave how to duplicate in the header of the button is generally acceptable

Answer 2

Flex order