使用css将第二个div移动到第一个位置

Answer 1

您可以使用 css order 属性：

例如通过放置

order: -1

，该项目将被放置在开头 下面的工作示例

.parent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.child2 {
  order: -1 /*Moves it to the first place*/
}

<div class="parent">
  <div class="child1">First</div>
  <div class="child2">Second</div>
  <div class="child3">Third</div>
</div>

Answer 2

对子项使用

order

参数：

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.child1 {
  order: 2;
}

.child2 {
  order: 1;
}

.child3 {
  order: 3;
}

<div class="parent">
  <div class="child1">First</div>
  <div class="child2">Second</div>
  <div class="child3">Third</div>
</div>