Safariの応答ボックスサイズの競合が発生する

Question

Safariで問題が発生しました。 私は、画面が小さくなるにつれて3つの列が2つの列に積み重なることを期待していますが、行は同じサイズのままに見えます。私は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 
} 

私が私の2を取得するようだ：ここで

は、問題のコード

HTMLです列は積み重ねられますが、適切なマージンはありません。

ChromeとFireFoxでページが正常に表示されます。これをSafariで正しく表示するには、どのような変更が必要ですか？

情報を追加----

私は他の記事で提案されているように曲がるように最小幅と最大幅を変更しようとしたが、それはラッピングの問題を修正しながら、flexboxesはリサイズ停止。答えは私が私のHTMLコードに.columnクラスを含めていなかったということです

@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

：ここ

は、私が使用しているメディアクエリです。私はこのフレームワークに精通しておらず、このクラスを省略しました。

フレックスボックスを持つすべてのdivにこのクラスを含めた後、私は@NathanielFlickが