Добрый день уважаемые. Подскажите пожалуйста как расставить правильно, в нужные места bootstrap классы, что б получить для размеров -sm -xs две колонки, по 5 и 4 изображений в каждой. Как на фото. А при -md и -lg, должно быть как изначально задано 3 колонки по 4 фото - Пример
.wrapen {
width: 100%;
height: 100%;
background-color: #00f;
}
.block {
width: 100%;
margin: 1%;
height: 100px;
background-color: #666;
border: 1px solid #f00;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row ">
<div class="col-md-12">
<div class="wrapen">
<div class="row">
<div class="col-md-4 visible-md visible-lg">
<div class="block"><img src="" alt="img1" /></div>
<div class="block"><img src="" alt="img2" /></div>
<div class="block"><img src="" alt="img3" /></div>
</div>
<div class="col-md-4 visible-md visible-lg">
<div class="block"><img src="" alt="img3" /></div>
<div class="block"><img src="" alt="img4" /></div>
<div class="block"><img src="" alt="img5" /></div>
</div>
<div class="col-md-4 visible-md visible-lg">
<div class="block"><img src="" alt="img6" /></div>
<div class="block"><img src="" alt="img7" /></div>
<div class="block"><img src="" alt="img8" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
Не могу понять как работать когда изображений не чётное количество