I'm having trouble getting two tables to reverse stacking order on mobile.

I have a JSFiddle here with my markup and CSS: https://jsfiddle.net/ctqwneb0/

There is a content block with an image on the right. I'm trying to stack it like the other sections when viewed on mobile but no matter what I've done, it won't swap order. I'm following a guide here: https://www.campaignmonitor.com/blog/email-marketing/2014/10/order-stacked-columns-responsive-email/

I removed the dir= property from the markup I provided since I couldn't seem to get it to work. I also have more nested tables than their rather simple example.

Can anyone assist in getting the tables to stack the same as the others?