CSS responsive Div

Question

I am trying to make a responsive page on which, when the page is smaller than 800px, the 2nd div will go down to 2nd column with 100% of page, and the 1st div will be also 100% of page. Currently when the screen is smaller than 700px, the 2nd div will move down but the position of 1st and 2nd messed up, kindly find the picture 1 for full size, picture 2 when mobile view.

Below is my html and css code.

.about-us__sec1-image {   
  left: 100px;
  max-width: 700px;
  width:100%;
  height:400px;
  position: relative;
  display:inline-block;
  padding-top: auto;
}
    
.about-us__sec1-paragraph {
  vertical-align:top; 
  display:inline-block;
  position:relative;
  top:20px;
  margin: 10px; 
  background-color: blue;
  height: 300px;
  width: 400px;
  max-width: 100%;
  font-size: 30;
  font-family: Trebuchet MS;
  padding: 30px;
  line-height: 1.5em;
  color: white;
  border-radius: 25px;
}

<div class="about-us__section1__wrapper">
  <img class="about-us__sec1-image" src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="Nature of Mountain">
  <div class="about-us__sec1-paragraph">This is the beauty of nature</div>
</div>

Answer 1

As said in the comments above, you should use media queries. Here a snippet of what you want to achive. Hopefully it helps.

.about-us__sec1-image{   
  left: 100px;
  max-width: 700px;
  width:100%;
  height:400px;
  position: relative;
  display:inline-block;
  padding-top: auto;
}

.about-us__sec1-paragraph{
  vertical-align:top; 
  display:inline-block;
  position:relative;
  top:20px;
  margin: 10px; 
  background-color: blue;
  height: 300px;
  width: 400px;
  font-size: 30;
  font-family: Trebuchet MS;
  padding: 30px;
  line-height: 1.5em;
  color: white;
  border-radius: 25px;
}

@media screen and (max-width: 800px) {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .about-us__sec1-paragraph {
    display: block;
    position: static;
    background-color: blue;
    height: 300px;
    width: auto;
    margin: 0; 
    font-size: 30;
    font-family: Trebuchet MS;
    padding: 30px;
    line-height: 1.5em;
    color: white;
    border-radius: 0px;
  }

  .about-us__sec1-image {
    position: static;
  }
}

<div class="about-us__section1__wrapper">
        <img class="about-us__sec1-image" src="https://images.unsplash.com/photo-1601033402923-342909b0c151?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="Nature of Mountain">
    <div class="about-us__sec1-paragraph">This is the beauty of nature</div>