Range slider with buttons - re-arrange in different breakpoints

HTML

<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>

SCSS

.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;
}

JavaScript

$("#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();
};