Help with responsive bootstrap

I'm developing a site with bootstrap. The site is ready for desktop, but I'm having a hard time making it responsive. On the site I have several divs, one underneath the other. When I decrease the site screen, the text from the top div goes to the bottom div and this goes on with all the texts below. Could someone help me?

Code snippet for small screens:

@media screen and (max-width:550px) {
        header .info a {display:none;}
        header .info i {display:none;}
        header .info span {padding:8px;}
        footer .colunas {width:100%;height:auto;}
        .f-info form {width:95%;}
        .sessionThree {display: none;}
        .sessionTwo h1 {display: fixed;}
        .sessionTwo p {max-height: 30px;}

        label.div {width:100%;}
        button[type=submit] {width:100%;}

}

The first DIV text falls to DIV below:

.sessionTwo {
border: 2px;
border-color: black solid;
background-color: #A60D0D;
margin-top: -120px;
background-image: url(../../midia/img/3.png);
width: auto;
min-height: 700px;
background-size: 100% 100%;
}

.sessionTwo h1 {
font-size: 50px;
font-weight: normal;
font-family: Lobster;
color: white;
padding-top: 80px;
padding-left: 80px;
max-height: 150px;
max-width: 550px;
}

.sessionTwo p {
color: white;
font-weight: normal;
padding-top: 130px;
padding-left: 80px;
max-height: 170px;
max-width: 500px;
}

Thank you!