All solutions

I noticed there was some weird changes when i try to reduce the width like some of the elements are short and some are big due to the content(text) present in them so if i wrap it around with a div will it solve? or any better suggestions is appreciated! Thanks.

It was rather easy but i still feel there is major room for improvement in this. recreating a replica is easy but making it exactly same is kinda tough.

Questions: Is there any way to make the content(text,imgs etc) in the div or card component make smaller according to the width of the screen. I tried using width:100% or width:100vw but it was not good enough and was overflowing out of the component when i try to decrease the screen size beyond 200px.

1.How to make our text responsive? when i try to minimize the screen width the text and image were overflowing from the card.

2.Is it a best practice to use both flexbox and bootstrap grid at the same time?