手机上的网格布局问题

Question

我的网站已准备就绪，但仍有1个问题让我反感。每当我认为在移动设备上我的网站，例如iPhone 6此外，在3X1网格布局仅显示1列，而不是我现在不能找出原因:(

HTML：

<div class="project-showcase"> 
     <div class="container"> 
      <h2>Latest Work, Projects <br> & ideas</h2> 
      <hr> 
      <div class="grid"> 
       <div class="col-3"><img src="http://placehold.it/300x180"> 
        <h3>Title of project</h3> 
        <p>Lorem ispum uion et lism un lium isum ispum uion et lism ispum uion et lism .</p> 
       </div> 
       <div class="col-3"><img src="http://placehold.it/300x180"> 
        <h3>Title of project</h3> 
        <p>Lorem ispum uion et lism un lium isum ispum uion et lism ispum uion et lism .</p> 
       </div> 
       <div class="col-3"><img src="http://placehold.it/300x180"> 
        <h3>Title of project</h3> 
        <p>Lorem ispum uion et lism un lium isum ispum uion et lism ispum uion et lism .</p> 
       </div> 
      </div> 
     </div> 
    </div> 

的CSS：

.project-showcase h2 { 
    color: #222; 
    font-size: 40px; } 
.project-showcase hr { 
    margin: 8vh 0 8vh 0; 
    border: 0; 
    border-bottom: 4px solid #222; 
    max-width: 5rem; } 

.grid { 
    display: flex; 
    flex-direction: row; 
    width: 100%; } 

.col-3 { 
    max-width: 33.33%; 
    flex-basis: 33.33%; 
    margin: 0 10px; } 
    .col-3 img { 
    width: 100%; } 
    .col-3 h3 { 
    font-size: 20px; 
    font-weight: 700; 
    margin: 5px 10px; } 
    .col-3 p { 
    margin: 0 10px; } 

@media screen and (max-width: 48em) { 
    .grid { 
    display: flex; 
    flex-direction: column; 
    width: 100%; } 

    .col-3 { 
    max-width: 100%; 
    flex-basis: 100%; 
    height: 100%; 
    text-align: center; } 
    .col-3 h3 { 
     margin: 25px; } 
    .col-3 p { 
     margin: 15px; } } 

网站网址：www.jacksewell.uk

Answer 1

我在这里更新了我的代码：http://codepen.io/FluidOfInsanity/pen/RRgvRJ

我改变了HR标签（你会想惹它更多）本

project-showcase hr { 
    margin: 8px 0 16px 0; 
    border: 0; 
    border-bottom: 4px solid #222; 
    max-width: 5rem; 
} 

保证金与原来的大小搞乱起来我的手机上。

我更新了手机尺寸是：

@media screen and (max-width: 48em) { 
.grid { 
    flex-direction: column; 
    min-height: 100%; 
    flex: 1; 
    flex-direction: column; 
} 
.col-3 { 
    max-width: 100%; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 
.col-3 h3 { 
    margin: 15px; 
    margin-bottom: 0; 
} 
.col-3 p { 
    margin: 15px; 
} 
}