The layout is not displayed correctly on the phone. How to properly adapt a site for a phone using flexbox?

Question

css

I made up the page, trying to make it adaptive at the same time.
When viewed through a desktop browser, and reducing its borders, everything works.
But as soon as I turn on the mobile view mode in chrome, or I go through the phone, nothing works.
All css code ran through autoprefixer .
What could be the problem?

You can see here .

Answer 1

Good morning, what exactly is displayed incorrectly?
How did you make the mobile version in general? A separate copy of the site, media queries, or something else?

Answer 2

https://developer.mozilla.org/ru/docs/Mozilla/Mobi... - an article, I advise you to read it.
"Flex" has a handy thing - flex-wrap (wraps container elements to a new line if there is not enough space)
In general, I advise you to read a couple of articles about flexbox, it will be clear there