title: How to make my text go underneath my image as a media Query?
body: <p>I'm trying to move my text underneath my image when the browser is 768px or smaller. </p>
  
  <p>This is what it currently looks like ( <a href="https://gyazo.com/5efe1edf174e35794f6e3efea101c0df" rel="nofollow">https://gyazo.com/5efe1edf174e35794f6e3efea101c0df</a> )</p>
  
  <pre><code>&lt;section id="about"&gt;
   &lt;h2 class="aboutme"&gt;About me&lt;/h2&gt;
     &lt;div&gt;
       &lt;img src="img/meprofile.jpg" alt="Photograph of Lee Howard" class="profile-photo"&gt;
  &lt;div&gt;
     &lt;p&gt;Hello! I'm Lee ho. I'm 22 years old l This experience.&lt;br&gt; If you have any questions, please don't he!&lt;/p&gt;
     &lt;p&gt;Check out my treehouse profile to see what I can do! &lt;a href="https://teamtreehouse."&gt;&lt;img src="img/download.png" alt="Treehouse Logo" class="social-icon"&gt;&lt;/a&gt;&lt;/p&gt;
       &lt;!-- &lt;p&gt;If you'd like to have !&lt;a    href="http://twitter.com/intent/tweet? screen_name=leehoward05"&gt;&lt;img src="img/twitter.png" alt="Twitter Logo" class="social-icon"&lt;/a&gt;.&lt;/p&gt; --&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/section&gt;
  
  
  
  @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;
  }
  </code></pre>