Stacking images of different sizes responsively - best practices

Hi, im new to webflow and working on my ux portfolio.
im trying to stack several images of mobile screens like this:

i tried setting the images to relative and controlling negative margins manually.
i cant seem to align the images to the mock up like in the image.
what is the best way to do so? should i put it in a grid? a div for each image?
i want to control the number of images in a row when i switch to mobile view. for example: if on desktop i have 6 images stacking in a row, in mobile i would like to put only three in a row and the next three underneath.
am i explaining myself right? :slight_smile:
thanks a lot!

Here is my site Read-Only: my site readonly