使用javaScript更改divs顺序

Question

我有这样的代码：

<div>
<div id="div1" class="flex">test 1</div>
<div id="div2" class="flex">test 2</div>
<div id="div3" class="flex">test 3</div>
<div id="div4" class="flex">test 4</div></div>

如何执行以下操作：当某人使用“flex”类单击div时，此div将转到“list”的顶部。例如，如果我单击id为“div3”的div，则元素的顺序应为：div3，div1，div2，div4。

我不想附加父div或内部HTML。