Rearrange Separate Gallery Blocks (Mobile)

Site URL: http://noname.squarespace.com

Each of the main 4 images are separate stacked gallery blocks with 2 images to produce a rollover effect using this code: https://www.ghostplugins.com/steps/110fne84 (So 4 different block id's).

On desktop, they are horizontal and, of course, the responsive design features makes them stack on mobile. However, I would like to have at-least 2 of the gallery blocks side by side on mobile to cut down on scrolling.

I assumed using a mobile css query: 

.sqs-block-gallery {
  width: 50%;
  margin-right: auto;
  margin-left: auto;
} 

to resize them would automatically "lift" them beside each other, but it only resizes and centers them.

I attached what I see on my screen and also what I am trying to achieve. If it would be simpler, I am willing to just change them to image blocks or just use code to apply the images in order to achieve it.

Add to Design > Custom CSS
 

@media screen and (max-width:767px) {
div#page-612d01e55edabd7ccc9b51f5 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

23 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-612d01e55edabd7ccc9b51f5 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

 

Thanks so much! You are a lifesaver! ❤️