Mobile CSS: move image to top on smaller devices, text and button below

Site URL: https://oboe-orb-t2t6.squarespace.com/

Hello! Been searching this forum for awhile and cannot fix this problem. What is CSS code for moving image to the top so the text can span full-width on mobile/tablets only?

This is a overlap image block card with other CSS styling already applied.

PW: peanut (I am using 7.1 trial so hopefully this works since I cannot publish until I upgrade)

Using this so far:

@media screen and (max-width:800px) 
  {[data-section-id="60a3d67d070c213253baad5f"] .sqs-block-image .design-layout-overlap
    {display: block;
    width: 100%;}
  }

Also, trying to make the boxes equal height on desktop 

@tuanphan

Thank you! that worked for the mobile cards - I just added some extra CSS to the .image-inset to prevent overlap.

I think I solved it too but my client said on her screen she was seeing it as uneven. I'll have to clarify if she was just in the "working screen" not the actual viewing of the page. It always looks different there which is frustrating.

Your solutions have helped me so much with building this site as I've never used CSS in big ways before, thank you for being such a resource.

You can check some screensize, if still have problem, let me know. We will support.