How can I arrange the flex child before the parent?

Question

I have the following HTML / CSS setup ( jsFiddle ):

.flex-container {
  display:flex;
  flex-direction:column;
}

.one, .two, .three {
  flex: 0 0 auto;
}

.one {
  order:0;
}

.two {
  order:1;
}

.three {
  order:2;
}

<div class="flex-container">
  <div class="three">
    <div class="one">One</div>
    <div>Three</div>
  </div>
  <div class="two">Two</div>
</div>

Run codeHide result

As you can see, my goal is to order the div .oneat the top. The problem is that this div is inside a flexible div with another order.

What I tried so far

• position:absoluteor fixedon .one. Although this works, I need all the divs to be blocks.
• I move the div .oneto the parent div using javascript, but the goal is to do this without JS.

Any viable solution for this?

Answer 1

, order. . .two .one .three :

• .one, .three.

, :

.flex-container {
  display:flex;
  flex-direction:column;
}
.two {
  background-color: rgba(0,0,0,.05)
  }
@media (min-width: 768px) {
  .two { order:1; }
  .one,.three { order: 2; }
}

<div class="flex-container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

Hide result

, .one .three (, -, , ) - - JavaScript. js driven @media , -/- ninja, @media / enquire.js. , , .two DOM.

---

, , , : ? ? -/-?