Why Does CSS Only Apply to Certain Screen Sizes?

Question

I'm using the following CSS to reorder two divs:

#flex { display: flex; flex-direction: column; }
.ld-login-modal-login { order: 2; }
.ld-login-modal-register { order: 1; }

(Source: How can I reorder my divs using only CSS?)

I'm not using it within any kind of media query.

It works great, but only on some screens. I'm using Safari in Responsive Design Mode to test, and for example:

1. iPhone SE (320x568) - the divs are not reordered
2. iPhone 8 vertical (375x667) - the divs ARE reordered
3. iPhone 8 horiztonal (736x414) - the divs are not reordered
4. Using my actual iPhone 11 - the divs are not reordered

I've tried adding this the site header, to no avail:

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

Since there's no media query involved, I'm at a loss as to why it applies to some screen sizes and not others.

I've tried encasing the CSS in various media queries with no effect.