Safari responsive box-sizing property conflict

Question

I've been having responsive issues with Safari. I'm expecting the three columns to stack into two columns as the screen becomes smaller, but the row seems to stay the same size.

Here is the code in question

HTML:

<section id="partners" align="center">
         <div class="row">
              <div class="small-4">
                  <div class="partner-logo" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
                     <img src="wp-content/uploads/2016/12/storks.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
                  </div><!--END .partner-logo -->
                  <div class="partner-name">
                      <h4>Save The Storks</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
                  </div><!--END .partner-name-->
               </div><!-- END .small-4 -->                              

          <div class="small-4">
               <div class="partner-logo wow slide-in" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
                     <img src="wp-content/uploads/2016/12/cor.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
                </div><!--END .partner-logo -->
                <div class="partner-name">
                     <h4>City of Refuge</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
                </div><!--END .partner-name-->
          </div><!-- END .small-4 -->                               

          <div class="small-4">
               <div class="partner-logo wow slide-in" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
                  <img src="wp-content/uploads/2016/12/alliance.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
               </div><!--END .partner-logo -->
                <div class="partner-name">
                   <h4>Alliance Defending Freedom</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
                  </div><!--END .partner-name-->
           </div><!-- END .small-4 -->                              

           <div class="small-4">
                <div class="partner-logo wow slide-in" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
                    <img src="wp-content/uploads/2016/12/drjames.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
                  </div><!--END .partner-logo -->
                  <div class="partner-name">
                     <h4>Family Talk with Dr. James Dobson</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
                  </div><!--END .partner-name-->
             </div><!-- END .small-4 -->                            

          <div class="small-4">
                  <div class="partner-logo wow slide-in" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
                     <img src="wp-content/uploads/2016/12/cgc.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
                  </div><!--END .partner-logo -->
                  <div class="partner-name">
                      <h4>Church of God in Christ</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
                  </div><!--END .partner-name-->
            </div> <!-- END .small-4 -->
        </div> <!-- END .row -->
 </section><!-- END #partners -->

CSS

.row {
max-width: 65.21739rem;
margin-left: auto;
margin-right: auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}

 :after, :before {
box-sizing: inherit
}

html {
font-size: 115%;
box-sizing: border-box
}

When I comment out the box-sizing property in the html element it seems I get my two columns stacked, but without the proper margins.

The page displays fine on Chrome and FireFox. What modifications do I need to do to get this to display properly on Safari?

ADDED INFO ----

I tried changing the min-width and max-width to flex as suggested in other posts, but while that fixed the wrapping issue, the flexboxes stopped resizing.

Here are the media queries I'm using:

@media (min-width: 300px) {
    .container {
        width: 280px;
        margin: 0 auto;
    }
    #partners .partner-logo img {
        margin-top: 30px;
        width: 80%;
        height:auto;
    }
    #partners {
        text-align: center;
        padding: 80px 0px 80px 5px;
    }

    .partner-container {
        margin: 0 auto;
        min-width: 310px;
        float: right;
    } 

    .feature-image .hero-layer h1 {
        padding: 80px 0 80px 0;
    }

    #partners-intro .row {
        padding: 30px 0;
        position: relative;
    }

    #partners-intro h3 {
        font-size: 1rem;
    }

    #partners .row {
        width: 100%;
        position: relative;
        margin: 0 auto;
    }

    #partners .small-4 {
        min-width: 98.5%;

    }


}



@media (min-width: 320px) {
    #partners .small-4 {
        min-width: 98.5%;

    }

}

@media (min-width: 480px) {
    .container {
        width: 400px;
        margin: 0 auto;
    }
    #partners .partner-logo img {
        margin-top: 30px;
        width: 80%;
        height:auto;
    }
    #partners {

        padding: 80px 0px 80px 5px;
    }

    #partners-intro .row {
        padding: 50px 0;
    }

    #partners-intro h3 {
        font-size: 1.44478rem;
    }

}

@media (min-width: 600px) {
    #partners .small-4 {
        min-width: 49.5%;
    }

}

@media (min-width: 768px) {
    .container {
        width: 700px;
        margin: 0 auto;
    }
    #partners .partner-logo img {
        margin-top: 30px;
        width: 80%;
        height:auto;
    }
    #partners {

        padding: 80px 0px 80px 5px;
    }
    .partner-box {
        margin: 0;
    }

    .feature-image .hero-layer h1 {
        padding: 100px 0 100px 0;

    }

    #partners-intro .row {
        padding: 60px 0;
    }

    #partners-intro h3 {
        font-size: 1.58478rem;
    }


    #partners .small-4 {
        min-width: 49.5%;

    }

}
@media (min-width: 992px) {
    .container {
        width: 895px;
        margin: 0 auto;
    }

    #partners .small-4 {
        min-width: 32.5%;

    }

}
@media (min-width: 1200px) {
    .container {
        width: 1101px;
        margin: 0 auto;
    }

    .feature-image .hero-layer h1 {
        padding: 180px 0 180px 0;

    }

    #partners-intro .row {
        padding: 80px 0;
    }

    #partners-intro h3 {
        font-size: 1.68478rem;
    }
}

Answer 1

The answer is that I was not including the .column class in my HTML code. I was not familiar with this framework and I omitted this class.

After including this class to all the divs with flex-boxes I replaced all min and max in the media queries with their flexbox equivalents as @NathanielFlick recommended