Getting alternative columns to have text on top in css - css

Question

I'm trying to create a page where I have image 1 on top and the text at the bottom and image 2 at the bottom and the text on top. I'm not sure how to go about doing it this way.
In my JSFIDDLE I would like "Text 1" to be at the bottom. "Text 2" on top and "Text 3" at the bottom.
my html
<div class="gallery_wrapper">
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/QuLaaLb.jpg">
</div>
<div class="gallery_title">
<h2>
Text 1
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 2
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/QuLaaLb.jpg">
</div>
<div class="gallery_title">
<h2>
Text 3
</h2>
</div>
</div>
JSFIDDLE

Answer 1

This should help you get started. You can use flex and pseudo-properties to achieve this.
.gallery_wrapper {
display: flex;
}
.gallery {
background: #333333;
}
.gallery:nth-child(even) {
display: flex;
flex-direction: column-reverse;
}
.gallery_title {
color: #fff
}
<div class="gallery_wrapper">
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 1
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 2
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 3
</h2>
</div>
</div>
</div>

Answer 2

You can use flexbox for your requirement.
In flexbox there are two properties with which you can solve your issue. Either using order or using flex-direction. But flex-direction is for parent and order is for child. So you can use any of the properties to solve your problem.
In this example snippet, I use order.
.item {
display: flex;
flex-direction: column;
}
.text {
font-size: 20px;
}
.image {
display: flex;
width: 200px;
height: 200px;
background-image: url('https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.item:nth-child(2n) .text {
order: 2;
}
<section>
<div class="item">
<span class="text">Text 1</span>
<span class="image"></span>
</div>
<div class="item">
<span class="text">Text 2</span>
<span class="image"></span>
</div>
<div class="item">
<span class="text">Text 3</span>
<span class="image"></span>
</div>
</section>

Answer 3

You can add the following CSS to achieve this.
.gallery{
position: relative;
}
.gallery_title{
position: absolute;
bottom: 5px;
left: 0;
}
.gallery:nth-child(even) .gallery_title{
bottom: auto;
top: 5px;
}
Check the link here jsfiddle