Centering text/content under images in flexbox?

Question

I've been attempting to add paragraph text under my vertically aligned image in flexbox, but have been getting trouble getting it to render onto the next line. Is it possible to get the text centered under the image?

Here is what I have: JsFiddle

HTML:

<section class="landing">
  <div class="left-half">
    <article>
      <img src="http://placehold.it/400x600" />
      <div class="text">
        <p>I need this text under the image</p>
      </div>
    </article>
  </div>
</section>

CSS:

.landing {
  display: flex;
}

.left-half {
  flex: 1;
  height: 100vh;
}

.left-half article {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-half article img {
  max-width: 50%;
  display: block;
}

.caption {
  display: block;
}

Answer 1

Declare flex-wrap: wrap; to your .left-half article selector rule, then add the below styles:

.text {
    flex: 1 1 100%;
    text-align: center;
}

Example:

.landing {
  display: flex;
}
.left-half {
  flex: 1;
  height: 100vh;
}
.left-half article {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
  flex-wrap: wrap;
}
.text {
    flex: 1 1 100%;
    text-align: center;
}
.left-half article img {
	max-width: 50%;
}
.right-half {
  	flex: 1;
  	height: 100vh;
}
.right-half article {
	height: 100%;
	width: 100%;
  	display: flex;
  	align-items: center;
  	justify-content: center;
}
.right-half .wrapper{
	background-color: #FFFFFF;
}
.right-half .content{
	padding: 15%;
	font-family: 'Playfair Display', serif;
}
.right-half .content h1 {
	font-weight: 900;
	font-size: 48px;
	padding-bottom: 15%;
	font-family: 'Playfair Display', serif;
	font-weight: 900;
}
.right-half .content p{
	font-size: 14px;
	line-height: 1.5em;
	margin-top: 15px;
}

<section class="landing">
	<div class="left-half">
		<article>
			<img src="http://placehold.it/400x600"/>
			<div class="text">
				<p>I need this text under the image</p>
			</div>
		</article>
	</div>
	<div class="right-half">
		<article>
			<div class="wrapper">
				<div class="content">
						<h1>This is a title</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet ligula gravida, dignissim purus id, dapibus augue. Maecenas quis semper nulla. Nulla rutrum dignissim diam, quis placerat leo consectetur eget. Maecenas aliquam, nisi et laoreet mollis, elit nulla fermentum enim, at accumsan justo justo et purus. Cras imperdiet ultricies velit. Suspendisse sit amet viverra risus. Nunc eu purus ex. Aliquam nec pulvinar tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse dictum lectus quis quam imperdiet, et egestas tellus convallis. Nunc sed quam ipsum.</p>
							<p>Vivamus bibendum imperdiet congue. Donec gravida lorem turpis, sit amet porttitor massa bibendum tempus. Integer egestas felis ut malesuada dictum. Nunc erat mi, egestas eget diam nec, interdum blandit nulla.</p>
				</div>
			</div>
		</article>
	</div>
		<div style="clear: both;"></div>
    </section>

Answer 2

Just set .left-half article to flex-direction:column;:

.left-half article {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
}

JSFiddle Demo