title: Move 3rd item under 2nd in flexbox
body: <p>I have an image with center aligned text to the right, but I need the 3rd element which I have named "title", Founder, to stack under the second item named "name" Dewey Stringer. You can see what I am trying to achieve <a href="https://seewebgo.com/aas/advisory-board/" rel="nofollow noreferrer">https://seewebgo.com/aas/advisory-board/</a></p>
  
  <p>I can't seem to add any code in here, but it is visible by going to the page.</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>.box {
     display: flex;
     align-items:center;
  }
  img.round{
  border-radius: 100px 100px 100px 100px;
  box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.5);
  margin: 30px 30px 30px 0;
  }
  .page-id-95 .box .name{
  font-size: 30px;
  font-weight: 500;
  }
  .page-id-95 .box .title{
  color: #ccc;
  text-transform: uppercase;
  align-items: baseline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;&lt;img src="https://seewebgo.com/aas/wp-content/uploads/2019/08/dewey-photo.jpg" alt="" width="202" height="202" class="alignnone size-full wp-image-175 round" /&gt;&lt;p class="name"&gt;Dewey Stringer&lt;/p&gt;&lt;p class="title"&gt;Founder&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>