<h1>CSS Sort Elements</h1>
<div class="sort-contents">
  <input id="sort-reset" type="radio" name="sort" checked><label for="sort-reset">Reset</label>
  <input id="sort-red" type="radio" name="sort"><label for="sort-red">Red</label>
  <input id="sort-blue" type="radio" name="sort"><label for="sort-blue">Blue</label>
  <input id="sort-yellow" type="radio" name="sort"><label for="sort-yellow">Yellow</label>

  <ul>
    <li data-color="red"></li>
    <li data-color="blue"></li>
    <li data-color="yellow"></li>
    <li data-color="red-blue"></li>
    <li data-color="blue"></li>
    <li data-color="red-yellow"></li>
    <li data-color="red"></li>
    <li data-color="blue-yellow"></li>
    <li data-color="yellow"></li>
    <li data-color="red"></li>
    <li data-color="yellow-red"></li>
    <li data-color="yellow"></li>
    <li data-color="blue"></li>
    <li data-color="red"></li>
    <li data-color="yellow"></li>
    <li data-color="yellow-blue"></li>
    <li data-color="blue-red"></li>
    <li data-color="blue"></li>
    <li data-color="yellow"></li>
    <li data-color="red"></li>
    <li data-color="red"></li>
    <li data-color="blue"></li>
    <li data-color="yellow"></li>
    <li data-color="red-blue"></li>
    <li data-color="blue"></li>
    <li data-color="red-yellow"></li>
    <li data-color="red"></li>
    <li data-color="blue-yellow"></li>
    <li data-color="yellow"></li>
    <li data-color="blue"></li>
    <li data-color="yellow-red"></li>
    <li data-color="yellow"></li>
    <li data-color="blue"></li>
    <li data-color="red"></li>
    <li data-color="blue"></li>
    <li data-color="yellow-blue"></li>
    <li data-color="blue-red"></li>
    <li data-color="blue"></li>
    <li data-color="yellow"></li>
    <li data-color="red"></li>
  </ul>
</div>
:root {
  --color-red: #e74c3c;
  --color-blue: #3498db;
  --color-yellow: #f1c40f;
}
h1 {
  margin: 1em 0;
  font-size: 3.2rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  text-align: center;
}
.sort-contents {
  padding: 1em;
  text-align: center;
}
input[name="sort"] {
  display: none;
}
label {
  display: inline-block;
  margin: 0 1em;
  font-size: 1.2rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  cursor: pointer;
}
label:hover,
input[name="sort"]:checked + label {
  color: #000;
  border-bottom: 2px solid currentColor;
}
input[name="sort"]:checked + label {
  cursor: default;
}
label[for="sort-red"]:hover,
#sort-red:checked + label {
  color: var(--color-red);
}
label[for="sort-blue"]:hover,
#sort-blue:checked + label {
  color: var(--color-blue);
}
label[for="sort-yellow"]:hover,
#sort-yellow:checked + label {
  color: var(--color-yellow);
}
ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px;
  padding: 1em 0 0;
  list-style: none;
  text-align: left;
}
ul li {
  width: calc(20% - 40px);
  min-height: 150px;
  margin: 40px 20px 0;
}
[data-color="red"] {
  background: var(--color-red);
}
[data-color="blue"] {
  background: var(--color-blue);
}
[data-color="yellow"] {
  background: var(--color-yellow);
}
[data-color="red-blue"] {
  background: linear-gradient(var(--color-red) 50%, var(--color-blue) 50%);
}
[data-color="red-yellow"] {
  background: linear-gradient(var(--color-red) 50%, var(--color-yellow) 50%);
}
[data-color="blue-yellow"] {
  background: linear-gradient(var(--color-blue) 50%, var(--color-yellow) 50%);
}
[data-color="blue-red"] {
  background: linear-gradient(var(--color-blue) 50%, var(--color-red) 50%);
}
[data-color="yellow-red"] {
  background: linear-gradient(var(--color-yellow) 50%, var(--color-red) 50%);
}
[data-color="yellow-blue"] {
  background: linear-gradient(var(--color-yellow) 50%, var(--color-blue) 50%);
}
#sort-red:checked ~ ul [data-color*="red"],
#sort-blue:checked ~ ul [data-color*="blue"],
#sort-yellow:checked ~ ul [data-color*="yellow"] {
  order: -1;
}
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans:300

External JavaScript

This Pen doesn't use any external JavaScript resources.