How to Make Custom Content Wrap/Stack in Mobile View? (Debut Theme)

[PickleKing]

Hi,

I have two sections of 'Custom Content' on my homepage. Each section has two images.

On Desktop view, they appear side-by-side, which I like. 
However, on Mobile view, when they appear side-by-side, it makes them really small due to the phone screen size.

Is there any code to make the 'Custom Content' show vertically one after the other on mobile view rather than side-by-side?

This is how it currently looks:

Many thanks

[paramSoft]

Please provide website url and if your store is password protected then also provide password

[PickleKing]

Hi sorry about that, 

Here is the Preview link, all passwords are disabled: https://70fy8w0onl0lyj6l-53754724549.shopifypreview.com

Many thanks

[paramSoft]

Please place this code at the end of Assets -> theme.scss

@media only screen and (max-width: 650px) {
.custom__item.small--one-half {
    -webkit-flex: 1 0 100%;
    -moz-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    max-width: 100%;
}
}

[PickleKing]

Wow, thank you so much for that solution! It worked!
There's just one small other problem - because of the way I have arranged the custom content, it now appears like:

1. Image (Section 1)
2. Image of Text (Section 1)
3. Image of Text (Section 2)
4. Image (Section 2)

And I feel the Images of Text together look messy.
I would still like to keep this arrangement on desktop, but is there any way to make the mobile view appear like this:

1. Image (Section 1)
2. Image of Text (Section 1)
3. Image (Section 2)
4. Image of Text (Section 2)

So basically just want to swap the position of the 'Custom Content' in the 2nd section on mobile view, if possible?

[paramSoft]

@media only screen and (max-width: 650px) {
#shopify-section-16144307649dc1e2c4 .custom-content .custom__item {
order: 1;
-o-order: 1;
-ms-order: 1;
}
}

[PickleKing]

Thanks for the response. 

I tried the code, but it's still the same. Anything I can adjust?

[paramSoft]

Please remove my old code and place this code.

@media only screen and (max-width: 650px) {
#shopify-section-16144307649dc1e2c4 .custom-content .custom__item:first-child {
order: 1;
-o-order: 1;
-ms-order: 1;
}
}

[PickleKing]

Unfortunately, this code didn't work either. Thank you for trying to help me though.