<main>
  <div class="wrapper">
    <article class="flow">
      <h1>การใช้งาน <code>flex-direction</code></h1>
      <div class="controls">
        <label>
          เลือก <code>flex-direction</code> ที่ต้องการทดสอบ
          <select id="switcher">
            <option value="row">row</option>
            <option value="row-reverse">row-reverse</option>
            <option value="column">column</option>
            <option value="column-reverse">column-reverse</option>
          </select>
        </label>
      </div>
      <div class="container">
        <div class="box box-1">กล่องที่ 1</div>
        <div class="box box-2">กล่องที่ 2</div>
        <div class="box box-3">กล่องที่ 3</div>
      </div>
    </article>
  </div>
</main>

.container {
  display: flex;
  gap: 1em;
  padding: 1em;
  border: 1px solid black;
  background-color: gray;
  margin: 1em 0;
}

.box {
  border: 1px solid black;
  padding: 1em;
}

.box-1 {
  order: 1;
  background-color: pink;
}

.box-2 {
  order: 2;
  background-color: lightgreen;
}

.box-3 {
  order: 3;
  background-color: skyblue;
}

select {
  width: min( 100vw - 2rem, 300px );
  padding: 1em;
}

const switcher = document.getElementById("switcher");
const container = document.querySelector(".container");

switcher.addEventListener("change", (e) => {
  container.style.flexDirection = e.target.value;
});