How correct is this approach?

Question

css

Good day. I recently started learning how to layout using grids similar to bootstrap grids, and now it's time to try to make the first adaptive site. I typed mobile first, but as soon as it came to the next screen resolutions, I begin to see that the code becomes very confusing. Is this normal or are there other approaches to such layout? Is it right to have a whole separate row for each type of device? And is such a heap of code in .scss files normal? Thank you.
Here is a piece of code: codepen.io/anon/pen/mVqJBQ
PS Most likely you will say that you should use fewer classes in html and use mixins. I redid the bootstrap grid (I used flexbox and a couple of my chips, I haven’t reached the mixins yet, of course, I’ll fix this later).
UPD. In the example I left, the row class is used to move to a new row. In the mobile version of the layout, there are two blocks that are located under each other. In the tablet version, the bottom block crawls one line with the top one. How can this be done using only 1 row?

Answer 1

All wrong.
No need to make so many blocks, one is enough, but with different classes.
Classes for different screen sizes are written inside media queries.

Answer 2

This approach is fundamentally wrong. The layout should be common for all devices, and you need to bring it into the appropriate form for certain resolutions through css and media-query. The less html markup the better.