CSS Flexbox

I ran into a lot of problems before I was able to make this display on mobile. I have a lot of questions that I don't even know where to start.

UPDATE!

I figured out what I was doing wrong by inspecting bootstrap grid(since they use flexbox for their grids).

What I found out: I was setting a fixed flex basis of 50% on the flex items on mobile. This was inherited from the default style I set for the desktop view(flex: 0 0 50%). I fixed this by setting flex to "0 0 auto" (you can set flex-basis alone to auto if u like). Note that i still had to set a fixed height got the flex item container with the image background for it to show up.

I will appreciate if anyone who is versed in CSS to help me take a look at my code and advise on the things that I'm doing wrong.

Also, for some reason, border-radius doesn't reflect on the row class, Is there a reason for this. This confuses me.

I intentionally submitted it this way so I can get helpful feedbacks so I can refactor my code. Help is greatly needed. Thanks!