A bit more flexible grid

Design help Layout & Design
1

I‘m struggling to make a rather unusual layout.

On my live website I have my work pieces arranged exactly like I want. Sadly, to achieve that I‘m using columns, and I don‘t like how work pieces are rearranged on smaller devices due to the markup

Screen Shot 2023-02-21 at 09.30.37
Screen Shot 2023-02-21 at 09.30.37604×518 35.6 KB

On my staging website I‘m trying to achieve the same with Grid, but it doesn‘t work out.

Flex would probably not be an option, since it behaves weirdly when I scale down the browser.

Anyone has ideas how to achieve the same layout as in the live website, but not with columns? Here my read-only link.

2

Turns out the solution was easier than I thoughts.

I put the following custom code, and it worked.

.work-list_item:nth-child(even) {
	margin-top: -4rem;
}
@media only screen and (max-width : 991px) {
	.work-list_item:nth-child(even) {
    margin-top: 0;
  }
}