# Alternates from the arrangement of image-text to text-image when adding further blocks

**URL:** <https://forum.pinegrow.com/t/alternates-from-the-arrangement-of-image-text-to-text-image-when-adding-further-blocks/8791>\
**Category:** Pinegrow WordPress Plugin\
**Created:** [March 17, 2024, 5:36pm UTC](https://forum.pinegrow.com/t/alternates-from-the-arrangement-of-image-text-to-text-image-when-adding-further-blocks/8791 "2024-03-17T17:36:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sylviomr](https://avatars.discourse-cdn.com/v4/letter/s/45deac/32.png) [@sylviomr](https://forum.pinegrow.com/u/sylviomr)\
**Post date:** [March 17, 2024, 5:36pm UTC](https://forum.pinegrow.com/t/alternates-from-the-arrangement-of-image-text-to-text-image-when-adding-further-blocks/8791/1 "2024-03-17T17:36:53Z")

</div>

Dear Community,  
I am currently trying out the functions of Pinegrow. I would like to create a grid which can be used as a Wordpress block in Gutenberg and which alternates from the arrangement of image-text to text-image when adding further blocks. I have tried, but it may not work. How would you proceed here and set up the element. I saw in a video by Adam Lowe (The No-Code way to Create Native Gutenberg Blocks with Pinegrow) that he worked with a wrapper element. Is this necessary here or how do I create the alternating display? 1000Thanks

 ![Bildschirmfoto 2024-03-17 um 18.20.03](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/ab5a24bbdb8d9c48331d20da6a43677f6e5010c4.jpeg)

---

<div class="post-metadata">

**Author:** ![Cary](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/cary/32/6029_2.png) [@Cary](https://forum.pinegrow.com/u/Cary)\
**Post date:** [March 17, 2024, 7:27pm UTC](https://forum.pinegrow.com/t/alternates-from-the-arrangement-of-image-text-to-text-image-when-adding-further-blocks/8791/2 "2024-03-17T19:27:42Z")

</div>

Perhaps use a container element around all the blocks that get added in so each block will alternate as an odd or even child and be styled accordingly.

---

<div class="post-metadata">

**Author:** ![Riccarcharias](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/riccarcharias/32/4051_2.png) [@Riccarcharias](https://forum.pinegrow.com/u/Riccarcharias)\
**Post date:** [March 18, 2024, 7:30am UTC](https://forum.pinegrow.com/t/alternates-from-the-arrangement-of-image-text-to-text-image-when-adding-further-blocks/8791/3 "2024-03-18T07:30:29Z")

</div>

I would also work with odd and even in CSS and use flex-direction (row-reverse) like @Cary said

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [March 18, 2024, 3:44pm UTC](https://forum.pinegrow.com/t/alternates-from-the-arrangement-of-image-text-to-text-image-when-adding-further-blocks/8791/4 "2024-03-18T15:44:14Z")

</div>

Another way would be to create a control on the block that lets you switch its direction using a toggle or dropdown. You’d need to have a class for the forward direction and a separate one for the reverse direction.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/4e6940ad963d0eece395486034fd7cd9a2d28422.png)

---

<div class="post-metadata">

**Author:** ![sylviomr](https://avatars.discourse-cdn.com/v4/letter/s/45deac/32.png) [@sylviomr](https://forum.pinegrow.com/u/sylviomr)\
**Post date:** [March 24, 2024, 3:24pm UTC](https://forum.pinegrow.com/t/alternates-from-the-arrangement-of-image-text-to-text-image-when-adding-further-blocks/8791/5 "2024-03-24T15:24:55Z")

</div>

Perfect. Many thanks for the tips. I will try and implement everything. I’ll learn at the same time.