Help with responsive bootstrap

Question

I’m developing a website with bootstrap. The site is already ready for desktop, but I’m having a hard time making it responsive. On the site I have several Ivs, one below the other. When I decrease the screen of the site, the text from the top div goes to the bottom div and this happens 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 drops to DIV from 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;
}

Ever since I thank!