Css Change Div Order Without Flex

given a HTML of:

1

2

3

4

I kn

Solution 1:

You can use grid layout, which has similar order properties.

.boxes {
  display: grid;
}

.class:nth-of-type(1) {
  order: 2;
}

.class:nth-of-type(2) {
  order: 4;
}

.class:nth-of-type(3) {
  order: 1;
}

.class:nth-of-type(4) {
  order: 3;
}

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

Solution 2:

You can use left and 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%;
  }

Solution 3:

There are many possibilities. The sanest, of course, is to use flex, but if you don't want that, one way is to do it like this.

.container {display: table;}
.class {display: table-row;}
.class:nth-child(3) {display: table-header-group;}
.class:nth-child(2) {display: table-footer-group;}

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