Un-sticking a sticky text element after viewport resize?

See more:

Javascript

jQuery

CSS3

I currently have a left-aligned sticky text block that becomes sticky at a certain scroll point while images at the right are free to scroll. This seems to be working fine on larger viewports (there is a little vertical text jump at about 630px down, I can live with it but if anyone knows how to make this smoother, feel free to share!). On smaller viewports the text element occupies 100% width above the images when everything switches over to one column.

The issue is that the text is still sticky at these smaller viewports (it should just become un-stuck and become scrollable). It's also causing the immediate image below to jump around.

I've set up a codepen if anyone wants to take a look and am completely open to any solution!
Codepen Link

What I have tried:

I've tried adding jQuery code that would disable the sticky scroll on anything under 948px but haven't had any luck with it working (note that I removed that code from the posting). I've also tried the css media query (position, etc) but nothing seems to be kicking it.