Знаю, звучит толсто. Но это правда возможно. Почти. Предлагаемый мной способ вряд ли применим в крупных проектах, но в мелких, для себя, типа «сайтов про кота», вполне рабочее решение. Возможность сортировки нам предоставит flexbox и css-переменные (они же custom properties) и js тут не потребуется.

Для начала создадим простой список критериев сортировки, который можно видеть почти в каждом интернет-магазине – по умолчанию, по цене (возрастание/убывание), по алфавиту (возрастание/убывание):

<input id="q1" type="radio" name="sort" checked>
<label for="q1">По умолчанию</label><br>

<input id="q2" type="radio" name="sort">
<label for="q2">По цене, по возрастанию</label><br>

<input id="q3" type="radio" name="sort">
<label for="q3">По цене, по убыванию</label><br>

<input id="q4" type="radio" name="sort">
<label for="q4">По алфавиту, по возрастанию</label><br>

<input id="q5" type="radio" name="sort">
<label for="q5">По алфавиту, по убыванию</label><br>

А так же сам сортируемый список. В этом списке каждый элемент имеет название товара (в данном случае «Первый», «Второй» и т.п. и цену товара).

<div class="wrapper">
	   <div class="item">Первый - 20000</div>
	   <div class="item">Второй - 17550</div>
	   <div class="item">Третий - 17549</div>
	   <div class="item">Четвертый - 17549</div>
	   <div class="item">Пятый  - 17549</div>
</div>

.wrapper {
	display: flex;
	flex-direction: column;
}

Что означает отсортировать список? Это значит, нам нужно поменять взаимное расположение элементов в списке. Потомкам flex-блока можно задать свойство order для изменения порядка их следования в блоке. Если order не задан для элемента, его значение равно нулю. Элемент с большим значением order будет поставлен ближе к концу блока, элемент с меньшим – ближе к началу. Таким образом, нам нужно всего лишь добавить некие сведения о порядке расположения элементов списка в свойство order каждого элемента. В этом нам помогут css-переменные (inline-css тут для наглядности).

<div class="wrapper">
	   <div class="item" style="--default: 1; --cost: 20000; --title: 2;">
	   	   Первый - 20000
           </div>
	   <div class="item" style="--default: 2; --cost: 17550; --title: 1;">
	   	   Второй - 17550
           </div>
	   <div class="item" style="--default: 3; --cost: 17549; --title: 4;">
	   	   Третий - 17549
	   </div>
	   <div class="item" style="--default: 4; --cost: 17549; --title: 5;">
	   	   Четвертый - 17549
	   </div>
	   <div class="item" style="--default: 5; --cost: 17549; --title: 3;">
	   	   Пятый  - 17549
	   </div>
</div>

И подставив в order значение из css-переменной мы получим элементы расставленные в нужном порядке.

/* по умолчанию */
#q1:checked ~ .wrapper > .item {
	order: var(--default);
}
/* по цене */
#q2:checked ~ .wrapper > .item,
#q3:checked ~ .wrapper > .item {
	order: var(--cost);
}
/* по алфавиту */
#q4:checked ~ .wrapper > .item,
#q5:checked ~ .wrapper > .item {
	order: var(--title);
}

Для сортировки по возрастанию/убыванию можно использовать свойство flex-direction:

#q3:checked ~ .wrapper,
#q5:checked ~ .wrapper {
	flex-direction: column-reverse;
}

К сожалению, сразу становится очевидна проблема «почти», о которой я упомянул в начале – порядок следования элементов, заданный в css-переменных должен быть определен заранее. И если с ценой это не представляет особой проблемы, можно просто указать значение в переменной --cost как есть, то с остальными сортировками, по умолчанию и по алфавиту, придется заранее раздать элементам индексы. К плюсам решения можно отнести то, что изменения в порядке сортировки применяются мгновенно.

> Вот рабочий прототип