Moving an element to the top of the container in flexbox
<p>I'm trying to move the "About me" header up to the top of the section as it's    currently stuck in the middle.</p>

<p>Also my second paragraph has joined onto the same line as my first paragraph.</p>

<p>One "weird" thing to me is that if I just remove the "about" id then the layout is completely fixed and perfect how I want it, but I'm trying to learn flexbox, so I don't really want to go down that route, unless I have to.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#about {
  margin-top: 50px;
  margin-left: 30px;
  display: flex;
  flex-flow: row;
}
.aboutme {
  font-family: 'Indie Flower', cursive;
  padding-top: 25px;
  order: 1;
  font-size: 2em;
}
.profile-photo {
  position: relative;
  top: 120px;
  left: 20px;
  order: 0;
  max-width: 700px;
  max-height: 500px;
  border-radius: 50px;
}
p {
  order: 2;
  position: relative;
  top: 50px;
  left: 50px;
  font-size: 1.25em;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color: #000
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;section id="about"&gt;
    &lt;img src="img/meprofile.jpg" alt="Photograph of" class="profile-photo"&gt;
    &lt;h2 class="aboutme"&gt;About me&lt;/h2&gt;
    &lt;p&gt;Hello!.&lt;/p&gt;
    &lt;p&gt;Check&lt;/p&gt;
  &lt;/section&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>