Every second post align different? How to ...?

[Roych]

Hello

I need some help with aligning every second post different than the first.
First post with image on the left and text on the right and every second with text on the left and image on the right.

I have a repeater field with title, image and text. I would like to stick with repeater if possible. 

I tried to look on the forum and google but no luck as I'm not even sure how this function is called.

It would be great if someone already did something similar.

Thank you very much

R

[elabx]

If using flexbox you could use the order property to change the order of the columns, I normally add a class to a parent div that wraps both columns.

foreach($page->repeater as $i => $item){
	//Going to offset the count starting from 1 instead of 0 so I can use modulo operator
    $i = $i + 1;
    $class = "";
	// If the count is even, such as 2,4,6, etc.
	if($i%2 == 0){
		$class = "invert-order";
	}
    echo "<div class='row {$class}'>";
    //output the columns here
    echo "..."; 
    echo "</div>";
}

You should end up with something like this:

https://codepen.io/elabx/pen/RwPMaym

[MoritzLost]

You don't even need to adjust your template, as long as the rows have one common parent you can use the CSS nth-selector:

.row {
    display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
    align-items: center;
}
.row:nth-child(2n) {
	flex-direction: row-reverse;
}

 

[Roych]

Hello, 

elabx I tried your code and it works perfect. I was looking for this so long. You are the best ?

Thank you very much

R

[elabx]

5 hours ago, MoritzLost said:

.row:nth-child(2n) { flex-direction: row-reverse; }

Smarter solution!

[Roych]

Thank you all, got it up and running perfectly. ?

R