Indent even rows of hexagons in CSS

I currently have a list of hexagons (images) that I have wrap to the next line when the as the browser width decreases. However, when this happens, they form even lines as seen in the first image, each starting at the same point on the x axis.

What I would like to do is alternate the rows such that every other row starts at an offset of the hexagon size as seen in figure two. It should also be noted that this example also has a negative y position relative to the respective position as determined from the first image.

Is there a way to do this with just CSS? I'd like to avoid using a library if at all possible.

This is similar to the question asked here, but I need the entire structure to be able to have an undetermined number of rows, so the solution where I specify which items are in which rows isn't feasible for my application.