将元素移动到flexbox中的容器顶部

Question

我试图移动＆＃34;关于我＆＃34;由于它目前卡在中间，所以标题到该部分的顶部。

此外，我的第二段已加入与第一段相同的行。

一个＆＃34;怪异的＆＃34;对我而言，如果我只是删除＆＃34; about＆＃34; id那么布局是完全固定的，完美的我想要它，但我试图学习flexbox，所以我真的不想走那条路，除非我不得不这样做。

＆＃13;

＆＃13;

#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
}

＆＃13;

<div>
  <section id="about">
    <img src="img/meprofile.jpg" alt="Photograph of" class="profile-photo">
    <h2 class="aboutme">About me</h2>
    <p>Hello!.</p>
    <p>Check</p>
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

#about {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.aboutme {
  font-family: 'Indie Flower', cursive;
  font-size: 2em;
  text-align: center;
}
.profile-photo {
  height: 50%;
  width: 50vw;
  border-radius: 50px;
  margin: 0 10px;
}
#about > div {
  display: flex;
  margin: 0 10px;
}
p {
  font-size: 2vw;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color: #000
}
body {
  background-color: white;
}

<section id="about">
  <h2 class="aboutme">About me</h2>
  <div>
    <img src="http://i.imgur.com/JV8yEjp.png" alt="Photograph of" class="profile-photo">
    <div>
      <p>Tart donut marzipan croissant sugar plum gummi bears apple pie. Wafer chocolate cake chupa chups macaroon danish topping. Bear claw gingerbread caramels chocolate bar chocolate marshmallow tart. Liquorice powder dessert.</p>
      <p>Wafer lemon drops tootsie roll halvah powder chupa chups apple pie. Sweet roll chocolate bar fruitcake chocolate biscuit gummi bears.</p>
    </div>
  </div>
</section>

jsFiddle