flex-direction: column-reverse except the first element

Question

i have multiple article element which prefer order in reverse, but the first element is a header element and i need it to be sticky at top, how could i reverse all items but the first header element ?

#content {
  display: flex;
  flex-direction: column-reverse;
}

and

<div id="content">
  <header>something</header>

  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
</div>

Answer 1

Use the order property. https://developer.mozilla.org/en-US/docs/Web/CSS/order

#content {
  display: flex;
  flex-direction: column-reverse;
}
header {
  order: 1;
}

<div id="content">
  <header>something</header>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
</div>