Grid is an adaptive grid, what's wrong?

Question

css

We need a header for the site, so that with adaptability,
now they are located in the desktop version like this:
"line-1 line-2"
"line-3 line-4"

in the mobile one so that it is on top of each other,
something with a media query does not work for the screen width , here is an example

Link CODEPEN

Answer 1

flex + media query covers your case 100
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Desktop flex: 1 1 50%
Mobile flex: 1 1 100%