css sorting

<!DOCTYPE html>
<html>
<head>

<style>.sortable {
  display:flex;
  flex-direction:column;
  border: 1px solid black;
  width: 100px;
}

.hint{
  display: block;
}

.hint > span {
  display: none;
}

#rad1:not(:checked) ~ #rad2:not(:checked) ~ .hint > span{
  display: inline;
}

#rad3:checked ~ .sortable > .row{
  order:attr(data-age,integer);
}

#rad1:checked ~ .sortable > .n1 {
  order: 1;
}

#rad1:checked ~ .sortable > .n2 {
  order: 2;
}

#rad1:checked ~ .sortable > .n3 {
  order: 3;
}

#rad1:checked ~ .sortable > .n4 {
  order: 4;
}

#rad2:checked ~ .sortable > .a1 {
  order: 1;
}

#rad2:checked ~ .sortable > .a2 {
  order: 2;
}

#rad2:checked ~ .sortable > .a3 {
  order: 3;
}

#rad2:checked ~ .sortable > .a4 {
  order: 4;
}

</style></head><body>
<div>
  <input type="radio" id="rad1" name="radio"/>
  <label for="rad1">Alphabetically</label>
  <input type="radio" id="rad2" name="radio"/>
  <label for="rad2">By Age</label>
  <input type="radio" id="rad3" name="radio" checked="checked"/>
  <label for="rad3">Age (requires attr support)</label>
  <div class="hint">&nbsp;<span>Please select sort type</span></div>
  <div class='sortable'>
    <div class='row n3 a4' data-age='7'>Dima; 7</div>
    <div class='row n1 a3' data-age='5'>Alice; 5</div>
    <div class='row n2 a2' data-age='3'>Bob; 3</div>
    <div class='row n4 a1' data-age='1'>George; 1</div>
  </div>
</div>
</body></html>