Нативным образом организовать вывод по 5 колонок в ряд в Bootstrap 4 достаточно проблематично. Адекватный варинат - расширить немного бустрап добавив новые классы 2.5.
CSS
.col-xs-2_5,
.col-sm-2_5,
.col-md-2_5,
.col-lg-2_5 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
width: 20%;
float: left;
}
.col-5-th {
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
@media (min-width: 768px) {
.col-sm-2_5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media (min-width: 992px) {
.col-md-2_5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media (min-width: 1200px) {
.col-lg-2_5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media only screen and (max-width: 992px) {
.col-md-2_5 {
width:33%;
float:none;
display:block;
-webkit-box-flex: 0;
-webkit-flex: 0 0 33%;
-ms-flex: 0 0 33%;
flex: 0 0 33%;
max-width: 33%;
}
.col-md-2_5.col-sm-2_5 {
width: 20%;
float: left;
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media only screen and (max-width: 769px) {
.col-md-2_5 {
width:100%;
float:none;
display:block;
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-md-2_5.col-sm-2_5 {
width:50%;
float:none;
display:block;
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
@media only screen and (max-width: 767px) {
.col-md-2_5 {
width:100%;
float:none;
display:block;
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.col-md-2_5.col-sm-2_5 {
width:100%;
float:none;
display:block;
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
HTML
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-2_5"></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2_5"></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2_5"></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2_5"></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2_5"></div>
</div>