<section class="p-article__container">
<article class="p-article">
<span class="p-article__text">
<h2 class="p-article__title">Article Title</h2>
<p class="p-article__subhead">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eos explicabo minus cumque laboriosam ut fuga reprehenderit nulla illo.
</p>
</span>
<div class="p-article__media">
<img class="p-article__img" src="http://lorempixel.com/400/200/sports" />
</div>
</article>
<article class="p-article">
<span class="p-article__text">
<h2 class="p-article__title">Article Title</h2>
<p class="p-article__subhead">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eos explicabo minus cumque laboriosam ut fuga reprehenderit nulla illo.
</p>
</span>
<div class="p-article__media">
<img class="p-article__img" src="http://lorempixel.com/400/200/sports" />
</div>
</article>
<article class="p-article">
<span class="p-article__text">
<h2 class="p-article__title">Article Title</h2>
<p class="p-article__subhead">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eos explicabo minus cumque laboriosam ut fuga reprehenderit nulla illo.
</p>
</span>
<div class="p-article__media">
<img class="p-article__img" src="http://lorempixel.com/400/200/sports" />
</div>
</article>
<article class="p-article">
<span class="p-article__text">
<h2 class="p-article__title">Article Title</h2>
<p class="p-article__subhead">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eos explicabo minus cumque laboriosam ut fuga reprehenderit nulla illo.
</p>
</span>
<div class="p-article__media">
<img class="p-article__img" src="http://lorempixel.com/400/200/sports" />
</div>
</article>
<article class="p-article">
<span class="p-article__text">
<h2 class="p-article__title">Article Title</h2>
<p class="p-article__subhead">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eos explicabo minus cumque laboriosam ut fuga reprehenderit nulla illo.
</p>
</span>
<div class="p-article__media">
<img class="p-article__img" src="http://lorempixel.com/400/200/sports" />
</div>
</article>
<article class="p-article">
<span class="p-article__text">
<h2 class="p-article__title">Article Title</h2>
<p class="p-article__subhead">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eos explicabo minus cumque laboriosam ut fuga reprehenderit nulla illo.
</p>
</span>
<div class="p-article__media">
<img class="p-article__img" src="http://lorempixel.com/400/200/sports" />
</div>
</article>
</section>
.p-article {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.p-article__text,
.p-article__media {
flex: 1 1 50%;
padding: 1em;
box-sizing: border-box;
}
.p-article__text {
text-align: right;
}
.p-article__img {
max-width: 100%;
}
.p-article:nth-of-type(even) {
flex-direction: row-reverse;
.p-article__text { text-align: left; }
.p-article__img {
display: block;
margin-left: auto;
}
}
Also see: Tab Triggers