html - 如何更改移动布局上的引导 4 列顺序？

Question

当我调整到移动设备时，我想按特定顺序排列列的元素。代码是：

<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">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>

当我调整大小时，我想要的顺序是：

[1]

[2]

[6]

[7]

[11]

[12]

[3]

[8]

[13]

[4]

[9]

[14]

[5]

[10]

[15]

我已经看到flex-column-reverse flex-md-row可以使用，但这并不能解决我的问题。

当我调整大小时，我应该怎么做才能得到我想要的订单？

标签： htmlcssbootstrap-4multiple-columns

Answer 1

您必须更改您的 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>