Html CSS/Bootstrap，无需使用webkit flex即可调整嵌入式布局的大小

我们有一个客户端需要的以下布局，我们似乎不能让它在所有浏览器中都工作

蓝色和黄色部分是图像，它们的高度相同。褐红色区域更像是一个表格，包含每个单元格的文本/链接。 对于桌面，一切都显示完美。 在iPhone上，链接区域的大小与我们需要的不同。基本上，我们需要所有3列都具有相同的高度并具有响应性，但实际情况是链接部分的高度没有设置为与两个图像部分相同的高度，并且底部单元格中的文本通常会向上推到其上方的单元格中。 为了获得这种布局，我们使用了flex，但iPhone上的safari似乎不像Android上的chrome那样格式化flex

这是最后一列的代码

 <div class="col-xs-6 col-sm-2 col" style="">               
<div class="flex member-grid responsive-font" style="font-size: 13.9167px;">
<div class="auto" style=""><a style="color: white" href="">TOP SECTION</a>
</div>
<div class="auto" style=""><a style="color: white" href="">2ND SECTION</a>
</div>
<div class="hidden-xs auto"><a style="color: white" href="/donate">3RD 
SECTION</a></div>
<div class="auto" style=""><a style="color: white" href="">4TH SECTION</a>
</div>
<div class="auto" style=""><a style="color: white" href="">5TH SECTION</a>
</div>  <div class="stretch flex" style="/* font-size:25px; *//* line-
height: 24px; */border-bottom: none;">
    <div class="stretch" style="justify-content: flex-end;">BOTTOM 1ST 
ROW</div>
    <div class="stretch" style="/* font-size:18px; */font-weight:100;/* 
 justify-content: flex-start; */">BOTTOM 2ND ROW</div>
</div>
</div></div>

倒数第一
一行
底部第二排

您使用的是引导3还是引导4？没有列出与您使用的类相同的类。我们使用3.3.7我们也需要您的CSS。