Avec flexbox, comment changer l'ordre et la direction entre les points d'arrêt ?

Question

J'essaie de placer le output au-dessus du curseur pour les petits écrans, et à droite du bouton "+" pour les autres. Comment puis-je faire cela avec flexbox, sans dupliquer le balisage ? La modification de l'ordre à l'aide d'une feuille de style CSS semble ne pas avoir l'effet escompté lorsque je dispose d'une feuille de style enveloppe. output au-dessus du curseur.

Des idées ?

$("#minus").click(function(event) {
  zoom("out");
});

$("#plus").click(function(event) {
  zoom("in");
});

$("#range").on('input change', function(event) {
  $('#output').text($(event.currentTarget).val());
});

function zoom(direction) {
  var slider = $("#range");
  var step = parseInt(slider.attr('step'), 10);
  var currentSliderValue = parseInt(slider.val(), 10);
  var newStepValue = currentSliderValue + step;

  if (direction === "out") {
    newStepValue = currentSliderValue - step;
  } else {
    newStepValue = currentSliderValue + step;
  }

  slider.val(newStepValue).change();
};

.container {
  width: 100%;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input[type=range] {
  width: 100%;
}

button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  font-size: 24px;
  border: 1px solid lightgrey;
  cursor: pointer;
  -webkit-appearance: none;
  margin: 0 10px;
}

.inner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#minus {
  order: 1;
}

#range {
  order: 1;
}

#output {
  order: 1;
  @media screen and (min-width: 320px) {
    order: 5;
  }
}

#plus {
  order: 4;
}

.inner-wrap {
  order: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button id="minus">-</button>
  <div class="inner-wrap">
    <output for="range" id="output">50</output>
    <input id="range" type="range" step="10" value="50">
  </div>
  <button id="plus">+</button>
</div>

• Démonstration : http://jsfiddle.net/remisture/8u6wetdy/

$("#minus").click(function(event) {
  zoom("out");
});

$("#plus").click(function(event) {
  zoom("in");
});

$("#range").on('input change', function(event) {
  $('#output').text($(event.currentTarget).val());
});

function zoom(direction) {
  var slider = $("#range");
  var step = parseInt(slider.attr('step'), 10);
  var currentSliderValue = parseInt(slider.val(), 10);
  var newStepValue = currentSliderValue + step;

  if (direction === "out") {
    newStepValue = currentSliderValue - step;
  } else {
    newStepValue = currentSliderValue + step;
  }

  slider.val(newStepValue).change();
};

.container {
  width: 100%;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input[type=range] {
  width: 100%;
}

button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  font-size: 24px;
  border: 1px solid lightgrey;
  cursor: pointer;
  -webkit-appearance: none;
  margin: 0 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button id="minus">-</button>
  <input id="range" type="range" step="10" value="50">
  <button id="plus">+</button>
  <output for="range" id="output">50</output>
</div>

• Démonstration : https://jsfiddle.net/remisture/4usbmf14/

Answer 1

Au lieu d'utiliser le order et les conteneurs imbriqués, utilisez le positionnement absolu. Voici une version simplifiée de votre code. La requête média utilise le positionnement absolu pour centrer la propriété output sur des écrans plus petits.

Démo révisée

.container {
  display: flex;
  align-items: center;
  margin: 50px auto;
  position: relative;
}

input[type=range] {
  flex: 1;
  min-width: 0;
}

button {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  font-size: 24px;
  border: 1px solid lightgrey;
  cursor: pointer;
  margin: 0 10px;
}

@media (max-width: 320px) {
  #output {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
  }
}

<div class="container">
  <button id="minus">-</button>
  <input id="range" type="range" step="10" value="50">
  <button id="plus">+</button>
  <output for="range" id="output">50</output>
</div>

---

Pour les autres qui seraient intéressés, voici une alternative : Mettez le output élément dans les deux emplacements.

Contrôlez leur apparence avec display: none dans la requête média.

Quelque chose comme ça :

@media screen and (min-width: 320px) {
    #output-small-screen { display: none }
}
@media screen and (max-width: 320px) {
    #output-wide-screen { display: none }
}

Démo révisée

.container {
  width: 100%;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input[type=range] {
  width: 100%;
}

button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  font-size: 24px;
  border: 1px solid lightgrey;
  cursor: pointer;
  -webkit-appearance: none;
  margin: 0 10px;
}

.inner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#minus {
  order: 1;
}

#range {
  order: 1;
}

#output-wide-screen {
  order: 5;
}

@media screen and (min-width: 320px) {
  #output-small-screen {
    display: none
  }
}

@media screen and (max-width: 320px) {
  #output-wide-screen {
    display: none
  }
}

#plus {
  order: 4;
}

.inner-wrap {
  order: 2;
}

<div class="container">
  <button id="minus">-</button>
  <div class="inner-wrap">
    <output for="range" class="output" id="output-small-screen">50</output>
    <input id="range" type="range" step="10" value="50">
  </div>
  <button id="plus">+</button>
  <output for="range" class="output" id="output-wide-screen">50</output>
</div>