Safari nth-child error

I’m writing a responsive wordpress site. I’m using the bones theme template. The grid system included worked pretty well on most of the site, but I found I needed differing number of columns on different screen sizes for a particular page.

To do this, I used a bit of scss that looks like this:

 (base media query)
 section{
        display:table;
        float:left;
        margin-left:0;
        width:100%;
 }

 (media query for 768 px and above)
 section{
        height:150px;
        width:48.618784527%;
        &:nth-child(3n+1), &:nth-child(2n){
                 margin-left:2.76243%;
        }
        &:nth-child(2n+1){ 
             margin-left:0;
        }
        text-align:right;
 }
 (media query for 1030px and above)
.pracareas{
        section{
                width:31.491712705%;

                &:nth-child(2n+1){
                        margin-left:2.76243%;
                }
                &:nth-child(3n+1){
                        margin-left:0;
                }
        }
 }

And HTML like this

<div class="pracareas">
     <section>... content</section>
     <section>... content</section>
     <section>... content</section>
     <section>... content</section>
</div>

This works great on desktop browser and Android. But on safari I get something like this:

What’s really strange is that if I refresh and/or rotate the ipad to portrait or vice versa, I get this:

But if I click on a link leading to this page or visit it directly (typing into the url bar), the layout is messed up until I refresh or rotate.

I’m probably going to abandon this approach and go for fixed number of columns above mobile because this seems really messy. But I thought I’d ask since it is only not working on a single browser.