I need 4 product images on my home page to sit beside each other in Mobile View in 2 rows and 2 Columns

Site URL: https://www.daronprice.com.au/

Ive been having a small issue with how certain product images look on my home page. 

I have 4 product images that sit beside each other on desktop view but on mobile they stack on top of each other. I want the 4 Images in mobile view to display in 2 rows and 2 columns. 

I was given a code which would help me do this but it doesn't seem to work. 

The code is:

@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-3 {
      width: 50% !important;
      float: left !important;
    }
}

:not(.sqs-edit-mode) #block-yui_3_17_2_1_1611892954947_10780 {
  display: none;
}
 

The code above displays weirdly in mobile view (Screenshots below for reference)

does anyone have any code I can use to fix this issue? Any help would be much appreciated! 

You can set clear: left for item 3

On 2/3/2021 at 6:07 PM, tuanphan said:

You can set clear: left for item 3

is there another code Im able to use? im not really sure how to implement what you said i'm sorry. 

Try this

@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-3 {
      width: 50% !important;
      float: left !important;
    }
 #block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-3:nth-child(2n+1) {clear: left !important;}
}