JS ve CSS ile HTML Elemanlarının Sıralamasını Nasıl Değiştiririz?

HTML elemanlarının sıralarını değiştirebilmeniz için kapsayıcı elemanının display değerinin flex olması gerekmektedir. Sonrasında javascript ile verdiğiniz order değerine göre sıralanacaktır.

Aşağıdaki kodlar butona basıldığında elemanların sırasının karışık olarak değişmesini sağlamaktadır.

<style>

  .kapsayici {

    display: flex;

    display: -webkit-flex;

    flex-direction: column;

    max-width: 92px;

    height: auto;

    margin: 0px auto;

    flex-wrap: nowrap;

    justify-content: flex-start;

    align-items: stretch;

    align-content: stretch;

  }

  .eleman,

  .karistirButon {

    padding: 3%;

    border: solid 1px #f00;

    margin: 2px;

    max-width: 92px;

    text-align: center;

  }

  .karistirButon {

    background-color: red;

    color: #fff;

    margin: 0px auto;

    margin-top: 5px;

    cursor: pointer;

    display: block;

    padding: 1%;

    max-width: 92px;

  }

</style>

<script>

  function siraDegistir() {

    var sira = 0;

    var siraliste = [];

    var i = 0;

    var elemanlar = document.querySelectorAll(".eleman");

    for (i = 0; i < elemanlar.length; i++) {

      sira = Math.floor(Math.random() * (elemanlar.length)) + 1;

      if (!siraliste.includes(sira)) {

        siraliste.push(sira);

        elemanlar[i].style.order = sira;

      } else {

        i--;

      }

    }

  }

</script>

<div class="kapsayici">

  <div class="eleman">1</div>

  <div class="eleman">2</div>

  <div class="eleman">3</div>

  <div class="eleman">4</div>

</div>

<div class="karistirButon" onclick="siraDegistir();">Sırayı Karıştır</div>

Bu kodların çalışır hali 

1

2

3

4

Sırayı Karıştır

Saygılarımla...
Turgut ARSLAN