The provided HTML structure may differ from the one you provided, but I used some demo data to simulate the desired behavior. The key element here is the flex-box property order. By utilizing the :nth-child property, I am able to change the order of h3 and img elements within every alternate timeline-wrapper div. It's important to ensure that both the h3 and img have the same height in order for the hr to be consistently displayed in the center.
<div class="flex-items">
<div class="timeline-wrapper">
<h3 class="row text-center">2017</h3>
<hr>
<img src="https://picsum.photos/200" />
</div>
<div class="timeline-wrapper">
<h3 class="row text-center">2018</h3>
<hr>
<img src="https://picsum.photos/200" />
</div>
<div class="timeline-wrapper">
<h3 class="row text-center">2019</h3>
<hr>
<img src="https://picsum.photos/200" />
</div>
<div class="timeline-wrapper">
<h3 class="row text-center">2020</h3>
<hr>
<img src="https://picsum.photos/200" />
</div>
</div>
CSS
.flex-items {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.timeline-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
hr {
background-color: blue;
height: 5px;
width: 100%;
}
h3,
img {
height: 200px;
margin: 0;
}
.timeline-wrapper:nth-child(2n) h3 {
order: 2;
}
.timeline-wrapper:nth-child(2n) img {
order: 0;
}
.timeline-wrapper:nth-child(2n) hr {
order: 1;
}
Access the live example here: https://jsfiddle.net/w6nvfb4d/32/