Réorganisation d'éléments

Réorganisation des éléments cochés en « tête de liste » en utilisant la propriété order, des boîtes flexibles (flexbox).

Rendu

Ajout de la class="at-start" aux éléments <label> des <input> cochés.
Le DOM n'est pas modifié, seul le rendu visuel est concerné.

Suppression de la class="at-start" aux éléments <label> des <input> cochés.
On rétabli le visuel de l'ordre dans le DOM.

Structure HTML

<div class="wrapper-check">
  <input type="checkbox" id="check_1" name="check_1"><label for="check_1">Check un</label>
  <input type="checkbox" id="check_2" name="check_2"><label for="check_2">Check deux</label>
  <!-- les autres contrôles -->
</div>

CSS minimum appliqué

.wrapper-check {
  display: flex;
  flex-wrap: wrap;
}
.at-start {
  order: -1;
}

JavaScript