Responsive konusunda birşey yazmamışsınız o yüzden responsive haline çevirmedim. Ama genel olarak istediğiniz şablon bu kodlarla oluşmaktadır. Maksimum genişlik nedir bilmediğimden 100% olarak düşündüm ve 100/11 sonucunu her kutunun genişliği olarak belirledim. Ben icon ve text olarak yaptım. Artık siz resim mi eklersiniz yoksa özel bir ayar mı yaparsınız bilmem.

<div class="flex-container">
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>
<!-- #response -->
<div class="flex-item-response">
<div class="span-container">
<span class="flex-icon">
<i class="fab fa-500px"></i>
</span>
<span class="flex-text">
500px
</span>
</div>
</div>

</div>

.flex-container{
display: flex;
flex-flow: row wrap;
}
.flex-item-response{
flex:9%;
height: 100px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.flex-item-response:nth-child(2n+1){
background: yellow;
}
.flex-item-response span{
display: block;
text-align: center;
}