How to solve overlapping contents(div) on small screen with bootstrap ?

Question

Check the code inserted below. Just want to make each divs to take a single row on small screen but the content below the colum are just hidden (jumbotron in this case). So what's the mistake and how can i solve it ?

https://code.sololearn.com/WrILWzUGsh9Q/?ref=app

Answer 1

Try to use @Media rule

@media screen and (min-width:20vh;) {
div {
height:50px;
}
}

Answer 2

Samiun Nafis Yea that's what i did. I thougt size of container will increased automatically to adjust column from row. But able to solve. Thank you!

Answer 3

Kuber Acharya Great to hear that, you solved it. Hope you'll reach your goal soon. ☺