RE: Please help with mobile layout images stacking and sizing terrible!

Site URL: http://www.humanbeingmankind.com

THANK YOU SO MUCH! Sorry, i still need a bit more help!

@tuanphan reference from this post: 

1. This worked!!! Please advise me of the other code to make all the pages work! 

pages needed for include the all collections page.. but I would like 3 photos per row (6 total so 2 rows 3)

is there anyway to change the order of them.. so that the last items on the desktop are the last items on mobile.. it seems like it fills column 1 then fills column 2...  i would like it to fill row 1, then row 2.. and so on.

2. this worked! One thing, now the 'announcement banner' looks a bit strange because theres no padding between it and the banner photo. anyway to put this above the header at very top on mobile just like it is on desktop?  also. this leaves a little bit of awkward space. (see attached for both)

3. on the mobile gallery, this also worked.. but one of the rows.. has one photo and then a blank space (see attached)

Q1.  Q2. Add to Home > Design > Custom CSS

/* Mobile shop pages */
@media screen and (max-width:640px) {
/* Women */
div#page-5e2bb7484251290eb11ca112 .span-12 .span-4 {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-column-gap: 5px;
}
/* Kid */
div#block-yui_3_17_2_1_1597060030912_11899 + .row .span-4 {
    width: 50% !important;
    float: left !important;
}
/* Men */
div#page-5e2bb782e605b23055de7c42 .span-4:first-child {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
}
div#page-5e2bb782e605b23055de7c42 .span-4:nth-child(n+2) {
    width: 50% !important;
    float: left !important;
}
/* Announcement bar */
.sqs-announcement-bar-dropzone {
    position: fixed;
    top: 0;
    z-index: 999;
    left: 0;
    width: 100%;
}
.Mobile-bar.Mobile-bar--top {
    top: 50px;
}
span.sqs-announcement-bar-close {
    visibility: hidden;
}
}

Q3. Can you share link to gallery?