Columns/Grid Vertical Align Desktop (not on mobile)

Hi!

I have vertically aligned two columns exactly as I want (on desktop), using the < div > and grid shortcode listed below. The effect is responsive, in that the 2 columns remain side-by-side even on the smaller screens, which makes the content in both columns pretty tiny.

Could you please help me with the CSS that would allow the vertical-centering to remain on desktop/tablet, but NOT on the mobile?

Thanks! :)

image: https://ibb.co/gEA1RQ

______________

MY CONTENT:

< div class="grid-container flex-vertical" >
[ lgc_column grid="50" tablet_grid="50" mobile_grid="100" equal_heights="false" last="false" ]
MY TEXT HERE
[ /lgc_column ][ lgc_column grid="50" tablet_grid="50" mobile_grid="100" equal_heights="false" last="true" ]
MY IMAGE HERE
[ /lgc_column ]
< /div >

ADDITIONAL CSS:

.flex-vertical{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;

align-items: center;
}
______________
Code/solution thanks to: this thread

p.s. I wasn't able to get the code to show up here, so I added some spaces, hoping it makes it through. :)