Html CSS在没有flex的情况下更改div顺序

给定以下内容的HTML：

<div class="class">1</div>
<div class="class">2</div>
<div class="class">3</div>
<div class="class">4</div>

应该生产哪一种

<div class="class">3</div>
<div class="class">1</div>
<div class="class">4</div>
<div class="class">2</div>

3
1.
4.
2.

---

有没有一种方法可以在不使用flexbox及其order属性的情况下执行此操作？

您可以使用

left

和

float:left

.class {
    position: relative;
    float: left;
    width: 25%;
   }

  .class:nth-child(1) {
    left: 75%;
  }

  .class:nth-child(2) {
    left: 25%;
  }

  .class:nth-child(3) {
    left: -25%;
  }

  .class:nth-child(4) {
    left: -75%;
  }

可以使用栅格布局，它具有类似的顺序属性


.box{
显示：网格；
}
.类别：第n种类型（1）{
顺序：2；
}
.类别：第n种类型（2）{
顺序：4；
}
.类别：第n种类型（3）{
顺序：1；
}
.类别：第n种类型（4）{
顺序：3；
}

1.
2.
3.
4.
有很多可能性。当然，最明智的做法是使用flex，但如果您不想这样做，一种方法就是这样做


.container{display:table；}
.class{显示：表行；}
.class:n子级（3）{显示：表头组；}
.class:n子级（2）{display:table footer group；}

1.
2.
3.
4.
出于好奇，为什么不
flexbox
？我只是想到了如何在没有flex的情况下做到这一点：）
left
与
float
没有任何关系。这对我来说是一个很好的答案，我用display flex设计了一个2列布局，我只是想在视口小于768px时让左列显示在底部。使用flex时，我无法简单地使用order来完成这项工作，但是在父级上使用display:grid时，这项工作非常出色！在像我这样的情况下，也可以使用flex-direction:column-reverse
.class {
    position: relative;
    float: left;
    width: 25%;
   }

  .class:nth-child(1) {
    left: 75%;
  }

  .class:nth-child(2) {
    left: 25%;
  }

  .class:nth-child(3) {
    left: -25%;
  }

  .class:nth-child(4) {
    left: -75%;
  }