Estoy intentando poner el circulo azul en el medio de los otros dos colores, pero me lo ubica en la última posición, intenté hacer el insertBefore a la etiqueta amarilla pero el circulo azúl no aparece
var blue = document.querySelector(".blue");
document.querySelector(".colors").insertBefore(blue, null);
.colors{
display: flex;
}
.colors > span{
height: 50px;
width: 50px;
margin: 5px;
border-radius: 50%;
display: blocK;
}
.yellow{
background-color: #ffff00;
}
.blue{
background-color: #0000ff;
}
.red{
background-color: #ff0000;
}
<div class="colors">
<span class="blue"></span>
<span class="yellow"></span>
<span class="red"></span>
</div>