Вы должны изменить свой HTML-код для достижения результата, попробуйте использовать CSS-сетку для управления упорядочением элемента. Пожалуйста, проверьте этот код.
.row
{
display: grid;
grid-template-columns: repeat(5, 50px);
grid-template-rows: repeat(5, 50px);
}
@media screen and (max-width: 767px) {
.row {
grid-template-columns: auto;
grid-template-rows: auto;
}
.col-sm-1:nth-of-type(1) {
order: 1;
}
.col-sm-1:nth-of-type(2) {
order: 2;
}
.col-sm-1:nth-of-type(6) {
order: 3;
}
.col-sm-1:nth-of-type(7) {
order: 4;
}
.col-sm-1:nth-of-type(11) {
order: 5;
}
.col-sm-1:nth-of-type(12) {
order: 6;
}
.col-sm-1:nth-of-type(3) {
order: 7;
}
.col-sm-1:nth-of-type(8) {
order: 8;
}
.col-sm-1:nth-of-type(13) {
order: 9;
}
.col-sm-1:nth-of-type(4) {
order: 10;
}
.col-sm-1:nth-of-type(9) {
order: 11;
}
.col-sm-1:nth-of-type(14) {
order: 12;
}
.col-sm-1:nth-of-type(5) {
order: 13;
}
.col-sm-1:nth-of-type(10) {
order: 14;
}
.col-sm-1:nth-of-type(15) {
order: 15;
}
}
<div class="container">
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
<div class="col-sm-1">5</div>
<div class="col-sm-1">6</div>
<div class="col-sm-1">7</div>
<div class="col-sm-1">8</div>
<div class="col-sm-1">9</div>
<div class="col-sm-1">10</div>
<div class="col-sm-1">11</div>
<div class="col-sm-1">12</div>
<div class="col-sm-1">13</div>
<div class="col-sm-1">14</div>
<div class="col-sm-1">15</div>
</div>
</div>