Actualmente tengo un código que obtiene todos los artículos de un CMS, con un número, una imagen y un texto y, en función de un verdadero o falso, se decide el orden del texto de la imagen. Entonces, una imagen puede estar encima del texto o debajo del texto. Pero lo quiero para que siempre sea: imagen debajo - imagen arriba - imagen debajo - imagen arriba, y no que pueda ser como imagen debajo - imagen debajo - imagen arriba, por lo que no se puede permitir tener una imagen debajo para dos artículos uno al lado del otro.

¿Alguien tiene una idea de lo que puedo hacer para lograr esto? Mi código actual:

 export const GridArticle = ({ item, idx }) => { const img = item.image; // If true, image at the top, if false, image at the bottom const dataOrder = [true, false]; dataOrder.sort(() => Math.random() - 0.5); console.log(dataOrder[0]); return ( <Wrapper> {dataOrder[0] ? ( <Wrapper> <a href={`/articles/${item._meta?.uid}`}> <Number>{idx + 1}</Number> <ImageWrapper> {img && <img src={img.url} alt={img.alt} style={{ marginBottom: '2rem' }} />} </ImageWrapper> <div> <h2>{item.title[0].text}</h2> <RichText render={item.intro} /> <span className="link">Lees verder</span> </div> </a> </Wrapper> ) : ( <Wrapper> <a href={`/articles/${item._meta?.uid}`}> <Number>{idx + 1}</Number> <div> <h2>{item.title[0].text}</h2> <RichText render={item.intro} /> <span className="link">Lees verder</span> </div> <ImageWrapper> {img && <img src={img.url} alt={img.alt} style={{ marginTop: '2rem' }} />} </ImageWrapper> </a> </Wrapper> )} </Wrapper> ); };