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.

I changed the flex direction of the card container to column for mobile but it hides the image part until I added a fixed height for the container(row class), Is this normal? Do you have to set height for a flex container in column mode?

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.

Here is another way I could have solved the row height problem: In the method above, I had to set row-direction to column on mobile and changed the flex-basis of the flex items to auto to achieve a responsive view. Another way I could achieve a responsive mobile view is to set flex-wrap of the flex container(.row) to 'wrap' (this way we don't need to set flex-direction to column on mobile), then set the flex-basis to '100%'(this is equivalent to setting width to 100%) on mobile.

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!