8

given a HTML of:

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

I know I can do a display:flextogether with:

.class :nth-child(1) { order: 2 }
.class :nth-child(2) { order: 4 }
.class :nth-child(3) { order: 1 }
.class :nth-child(4) { order: 3 }

which should produce

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

Is there a way to do this without using the flexbox in combination with its order property?

2
  • 3
    Just out of curiosity, why not flexbox?
    – Vucko
    Commented Oct 23, 2018 at 8:18
  • Just a thought of mine how to do this without flex:)
    – ItFreak
    Commented Oct 23, 2018 at 8:29

4 Answers 4

14

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;
}
<div class="boxes">
  <div class="class">1</div>
  <div class="class">2</div>
  <div class="class">3</div>
  <div class="class">4</div>
</div>

2
  • This was a great answer for me, I had display flex for a 2 column layout, I simply wanted to make the left column show at the bottom when viewport was less than 768px. With flex I was unable to do this simply using order, however with display:grid on the parent this worked beautifully!
    – drooh
    Commented May 10, 2019 at 16:48
  • You can also use flex-direction: column-reverse in a situation like mine
    – drooh
    Commented May 10, 2019 at 20:20
1

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;}
<div class="container">
  <div class="class">1</div>
  <div class="class">2</div>
  <div class="class">3</div>
  <div class="class">4</div>
</div>

0

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%;
  }
1
  • 3
    left has nothing to do with float.
    – Vucko
    Commented Oct 23, 2018 at 8:37
0

There is possibly a more "class"y solution closer to the ":root" of the problem. With :root variables and css classes utilizing calc. Chrome, FF and Edge were happy with this. Use your own .reverse class switcher.

    <style>
:root{
/* To Reverse the node order */
  --reverse-order:-1;

/* One for each node */
  --order-1:1;
  --order-2:2;
  --order-3:3;
  --order-4:4;
  --order-5:5;
  --order-6:6;
  --order-7:7;
  --order-8:8;
  --order-9:9;
}
.grid{
    display:grid;
    padding:1em;
    max-width:44em;
    justify-content: center;
    grid-template-columns:repeat(auto-fit,10em);
    gap:1em;
    outline:1px solid black;
}    
.FIELDS{
    transition: all 2s ease-in-out;
}    
.FIELDS *{
    transition: all 3s ease-in-out;
}

.order-1{ order:var(--order-1);}
.order-2{ order:var(--order-2);}
.order-3{ order:var(--order-3);}
.order-4{ order:var(--order-4);}
.order-5{ order:var(--order-5);}
.order-6{ order:var(--order-6);}
.order-7{ order:var(--order-7);}
.order-8{ order:var(--order-8);}
.order-9{ order:var(--order-9);}

.reverse .order-1{ order:calc( var(--reverse-order) * var(--order-1) );}
.reverse .order-2{ order:calc( var(--reverse-order) * var(--order-2) );}
.reverse .order-3{ order:calc( var(--reverse-order) * var(--order-3) );}
.reverse .order-4{ order:calc( var(--reverse-order) * var(--order-4) );}
.reverse .order-5{ order:calc( var(--reverse-order) * var(--order-5) );}
.reverse .order-6{ order:calc( var(--reverse-order) * var(--order-6) );}
.reverse .order-7{ order:calc( var(--reverse-order) * var(--order-7) );}
.reverse .order-8{ order:calc( var(--reverse-order) * var(--order-8) );}
.reverse .order-9{ order:calc( var(--reverse-order) * var(--order-9) );}
</style>

<div>
<h4>Fields<button onclick="document.querySelector('.FIELDS').classList.toggle('reverse')">Toggle Order</button></h4>
<div class="grid FIELDS">
  <div class="FIELD order-1 ">Field #1</div>
  <div class="FIELD order-2 ">Field #2</div>
  <div class="FIELD order-3 ">Field #3</div>
  <div class="FIELD order-4 ">Field #4</div>
  <div class="FIELD order-5 ">Field #5</div>
  <div class="FIELD order-6 ">Field #6</div>
  <div class="FIELD order-7 ">Field #7</div>
  <div class="FIELD order-8 ">Field #8</div>
  <div class="FIELD order-9 ">Field #9</div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.