UPDATE - 1/3/2018 - read my last message on this thread for the update. Found my error.
I have a super simple page layout with an 8-column/4-column split, very basic layout.
I am using the out-of-the-box Foundation 5.3 with CSS that only changes colors and nothing in regard to sizing. On an iPhone this page is only really readable if I turn the phone to landscape. In portrait, only the left portion of the nav shows rather than defaulting to the menu/icon and the two columns shrink but spread off the visible screen.
I work in straight css (long story - just know that I cannot move to scss/sass for reasons above my pay-grade and Foundation 6 not an option at this time either).
I know that I should not code JUST for a single device, but really I think this is more about "small" not being responsive.
I don't use any push/pull logic - just very vanilla as shown above.
How do I begin the process of tweaking the top-level nav so it is responsive on a small screen, and how do I make my columns stack rather than shrink on a smaller screen? If I get the responsive right - will they stack automatically? Our site subsists within an iFrame environment over which I have no control - but I don't actually think that is keeping this from working. I think there is some piece of understanding that I'm missing.
I did try tweaking the small, medium, large - but honestly that just made a muddy mess for me so I've gone back to the way the Foundation.css was originally created to start fresh.