Сделал на пробу макет, который работает как нужно в IE, FireFox и Chrome под Windows, даже под IE11.
Но рано обрадовался. В Safari под Mac и на iPad'е не работает промежуточный вариант с двумя колонками (ширина между 768 и 1199).
Я только начал знакомство с flex и пока вообще не представляю, в чем может быть проблема. Доступ к Mac'у у меня тоже пока ограничен, чтобы поиграться с вариантами.
Буду признателен, если кто-то сможет помочь.
#section-tiles-home {
margin: 15px;
}
#section-tiles-home .row {
margin: 0;
}
#section-tiles-home [class^="col-"] {
padding: 0;
}
#section-tiles-home .tile-img {
margin: 0 0 15px;
}
.tiles-col-1,
.tiles-col-2 {
display: flex;
}
.tiles-col-2,
.tiles-col-3 {
flex-direction: column;
}
.tiles-col-1>.tile-img {
flex-grow: 1;
}
.tiles-col-2 .tile-img:nth-child(1) {
flex-grow: 2;
}
.tiles-col-2 .tile-img:nth-child(2) {
flex-grow: 3;
}
.tiles-col-3>.row {
flex-grow: 1;
}
.tiles-col-3 .tile-img {
height: 65vw;
}
.tile-img {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
}
.tile-img-text-container {
align-self: stretch;
color: #fff;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
padding: 15px;
transition: all .3s ease-in-out;
}
.tile-img-text-container a {
text-decoration: none;
}
.tile-img-text-container a:hover {
text-decoration: underline;
}
.tile-img-text-container .h3 {
font-size: 20px;
margin: 0;
transition: all .3s ease;
}
.tile-img-text-container .tile-img-text {
display: none;
font-weight: bold;
text-shadow: 0 1px 0 #000;
}
.tile-img-text-container:hover {
background: rgba(0, 0, 0, 0.5);
}
.tile-img-text-container:hover .h3 {
transform: translateY(-20px);
}
.tile-img-text-container:hover .tile-img-text {
animation: slideInUp .3s ease;
display: block;
}
@media (max-width: 767px) {
.tiles-col-1 .tile-img {
height: 100vw;
}
.tiles-col-2 .tile-img:nth-child(1) {
height: 84vw;
}
.tiles-col-2 .tile-img:nth-child(2) {
height: 105vw;
}
}
@media (min-width: 768px) {
#section-tiles-home {
margin: 7px;
}
#section-tiles-home>.row {
display: flex;
}
#section-tiles-home .tile-img {
margin: 7px;
}
.tiles-col-2 .tile-img {
flex-basis: 0;
}
.tiles-col-3 .tile-img {
height: 21vw;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
#section-tiles-home>.row {
flex-flow: wrap;
}
.tiles-col-1 .tile-img {
height: 66vw;
}
}
@media (min-width: 992px) {
.tile-img-text-container .h3 {
font-size: 24px;
}
.tile-img-text-container .tile-img-text {
font-size: 18px;
}
}
@media (min-width: 1200px) {
.tiles-col-3 .tile-img {
height: 16vw;
}
.tile-img-text-container .h3 {
text-transform: uppercase;
}
}
@media (min-width: 1600px) {
.tile-img-text-container .h3 {
font-size: 30px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha256-j+P6EZJVrbXgwSR5Mx+eCS6FvP9Wq27MBRC/ogVriY0=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</head>
<body>
<section id="section-tiles-home">
<div class="row">
<div class="col-lg-6 col-sm-8 tiles-col-1">
<div class="tile-img" style="background-image:url('https://picsum.photos/944/800?image=1063')">
<div class="tile-img-text-container">
<div class="h3">Tile 1</div>
<div class="tile-img-text">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://picsum.photos/70/70?image=1074" alt="">
</a>
</div>
<div class="media-body">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://picsum.photos/70/70?image=1074" alt="">
</a>
</div>
<div class="media-body">
Lorem ipsum dolor sit amet
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci distinctio ducimus ipsa modi neque quia quod rerum vel! Culpa nihil nisi numquam perspiciatis quam quod reiciendis repellat saepe? Pariatur!
</p>
<a href="#">Link</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-4 tiles-col-2">
<div class="tile-img" style="background-image:url('https://picsum.photos/466/314?image=1041')">
<div class="tile-img-text-container">
<div class="h3">Tile 2</div>
<div class="tile-img-text">
<a href="#">Link</a>
</div>
</div>
</div>
<div class="tile-img" style="background-image:url('https://picsum.photos/469/477?image=1044')">
<div class="tile-img-text-container">
<div class="h3">Tile 3</div>
<div class="tile-img-text">
<a href="#">Link</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-12 tiles-col-3">
<div class="row">
<div class="col-lg-12 col-sm-4">
<div class="tile-img" style="background-image:url('https://picsum.photos/466/480?image=1067')">
<div class="tile-img-text-container">
<div class="h3">Tile 4</div>
<div class="tile-img-text">
<a href="#">Link</a>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-sm-4">
<div class="tile-img" style="background-image:url('https://picsum.photos/469/317?image=1061')">
<div class="tile-img-text-container">
<div class="h3">Tile 5</div>
<div class="tile-img-text">
<a href="#">Link</a>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-sm-4">
<div class="tile-img" style="background-image:url('https://picsum.photos/469/477?image=1057')">
<div class="tile-img-text-container">
<div class="h3">Tile 6</div>
<div class="tile-img-text">
<a href="#">Link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>