如何更改移动布局上的引导 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，但这并不能解决我的问题。

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

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>

Answer 2

既然您可以为移动设备创建另一个 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>

Answer 3

<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 及以上断点处中性排序。 bootstrap 有以下订单类助手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]