I am trying to reverse the order of these components. I have tried using standard display: grid; and Google suggested grid-auto-flow: dense;, but it didn't work as expected. Could the issue be with the structure of the components? Ideally, I would like every even component to be displayed in reverse order.
In index.js
<ContainerCard>
<CardImg src={photo1}/>
<CardInfo>
<CardH2>Title #1</CardH2>
<CardP>
Some text
</CardP>
</CardInfo>
</ContainerCard>
In Styled.js
export const ContainerCard = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: dense;
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
}
`