如何使我的文本作为媒体查询在我的图像下面？

Question

当浏览器为768px或更小时，我正试图在我的图像下移动文本。

这就是它目前的样子（https://gyazo.com/5efe1edf174e35794f6e3efea101c0df）

<section id="about">
 <h2 class="aboutme">About me</h2>
   <div>
     <img src="img/meprofile.jpg" alt="Photograph of Lee Howard" class="profile-photo">
<div>
   <p>Hello! I'm Lee ho. I'm 22 years old l This experience.<br> If you have any questions, please don't he!</p>
   <p>Check out my treehouse profile to see what I can do! <a href="https://teamtreehouse."><img src="img/download.png" alt="Treehouse Logo" class="social-icon"></a></p>
     <!-- <p>If you'd like to have !<a    href="http://twitter.com/intent/tweet? screen_name=leehoward05"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"</a>.</p> -->
        </div>
        </div>
        </section>



@media (max-width: 768px) {
#about,
#contact-page {
width: 100%;
padding: 20px;
}

.profile-photo {
 width: 100%;
}

#about p {
color: red;
font-size: 0.75em;
text-align: justify;
}

#header {
max-height: 480px;
padding: 50px 25px 0;
}