Align child elements in parent flex containers - css

Question

I need help horizontally aligning child elements in parent flex boxes.
The layout below shows a flex container (".parent") showing 4 parent containers (".child"):
Please take a look at this flexbox graphic
(I can't show my actual project so I mocked it up in Illustrator.)
The green box (top) represents a variable text headline (max 3 lines).
The blue box (second one down) represents an image with fixed height and width(I want these images to be aligned on top).
The yellow box represents a paragraph of varying copy.
The purple box on the bottom is another fixed-height flex box.
I have the following code (in LESS):
.parent {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-flow: wrap;
flex-wrap: wrap;
.child {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1;
-ms-flex:1;
flex:1;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
-webkit-align-content: space-around;
align-content: space-around;
.green {
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.blue {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.purple {
-webkit-flex: 1;
-ms-flex:1;
flex:1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
}
.yellow {
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
}
}
EDIT - and here's the HTML code:
<section class="parent">
<article class="child">
<a href="#">
<h3 class="green">Title of article</h3>
<div class="blue"><img class="img-responsive" src="/stuff/headerImage.png" /></div>
</a>
<section class="purple">
<div class="authorImage"><img src="/writers/JohnDoe.jpg") /></div>
<h4 class="authorTitle">by John Doe</h4>
</section>
<p class="yellow">Paragraph introducing article summary.</p>
</article>
<article class="child">
<a href="#">
<h3 class="green">Title of article</h3>
<div class="blue"><img class="img-responsive" src="/stuff/headerImage.png" /></div>
</a>
<section class="purple">
<div class="authorImage"><img src="/writers/JohnDoe.jpg") /></div>
<h4 class="authorTitle">by John Doe</h4>
</section>
<p class="yellow">Paragraph introducing article summary.</p>
</article>
<article class="child">
<a href="#">
<h3 class="green">Title of article</h3>
<div class="blue"><img class="img-responsive" src="/stuff/headerImage.png" /></div>
</a>
<section class="purple">
<div class="authorImage"><img src="/writers/JohnDoe.jpg") /></div>
<h4 class="authorTitle">by John Doe</h4>
</section>
<p class="yellow">Paragraph introducing article summary.</p>
</article>
<article class="child">
<a href="#">
<h3 class="green">Title of article</h3>
<div class="blue"><img class="img-responsive" src="/stuff/headerImage.png" /></div>
</a>
<section class="purple">
<div class="authorImage"><img src="/writers/JohnDoe.jpg") /></div>
<h4 class="authorTitle">by John Doe</h4>
</section>
<p class="yellow">Paragraph introducing article summary.</p>
</article>
</section>