由于您可以为移动设备创建另一个div，因此可以使用display utilities
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container d-none d-sm-block">
<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>
<div class="row">
<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>
<div class="row">
<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>
<div class="container d-sm-none d-flex align-items-center justify-content-around">
<div>1</div>
<div>2</div>
<div>6</div>
<div>7</div>
<div>11</div>
<div>12</div>
<div>3</div>
<div>8</div>
<div>13</div>
<div>4</div>
<div>9</div>
<div>14</div>
<div>5</div>
<div>10</div>
<div>15</div>
</div>
,
您必须更改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>
,
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-1 order-sm-0 order-0">1</div>
<div class="col-sm-1 order-sm-0 order-0">2</div>
<div class="col-sm-1 order-sm-0 order-3">3</div>
<div class="col-sm-1 order-sm-0 order-4">4</div>
<div class="col-sm-1 order-sm-0 order-5">5</div>
<div class="col-sm-1 order-sm-0 order-1">6</div>
<div class="col-sm-1 order-sm-0 order-1">7</div>
<div class="col-sm-1 order-sm-0 order-3">8</div>
<div class="col-sm-1 order-sm-0 order-4">9</div>
<div class="col-sm-1 order-sm-0 order-5">10</div>
<div class="col-sm-1 order-sm-0 order-2">11</div>
<div class="col-sm-1 order-sm-0 order-2">12</div>
<div class="col-sm-1 order-sm-0 order-3">13</div>
<div class="col-sm-1 order-sm-0 order-4">14</div>
<div class="col-sm-1 order-sm-0 order-5">15</div>
</div>
</div>
order block
这里order-sm-0类将在sm及更高的断点处保持中性顺序。引导程序具有以下订单类帮助程序https://getbootstrap.com/docs/4.3/utilities/flex/#order
我按照以下顺序组织了订单类
order-0 => [1],[2]
order-1 => [6],[7]
order-2 => [11],[12]
order-3 => [3],[8],[13]
order-4 => [4],[9],[14]
order-5 => [5],[10],[15]
本文链接：https://www.f2er.com/3153520.html
