Me imagino que estás intentando trabajar en PHP, se un poco más específico cuando necesites ayuda con un lenguaje concreto.
Para tu caso, necesitarías ir almacenando cada uno de los nombres de los directorios (excepto el actual y el directorio padre) en un array inicialmente vacío, llamémosle "dirs".
$dirs = array();
Luego dentro del bucle, ir almacenando cada uno de los elementos (en este caso nombres de directorio) dentro del array.
while($dir = readdir($gestor))
{
if($dir != "." && $dir != "..")
{
array_push($dirs, $dir);
}
}
Después del bucle, ordenar el array usando simplemente la función predeterminada sort:
sort($dir);
Y ya por último hacer otro bucle para mostrar cada una de las rutas de las imágenes almacenadas en el array (ojo con concatenar bien las cadenas de caracteres con los nombres de las variables):
foreach($dirs as $ruta)
{
echo "<li class='badge' style='background-image:url(" . $folder . "/" . $ruta . ");'></li>";
}
PD: He colocado el código entre etiquetas de cita en lugar de usar las de código, ya que estas hacen que algunos caracteres como las comillas se muestren por entidades y no literalmente. Lo malo es que así no se ve el sangrado del código, pero eso se puede arreglar haciendo clic en citar este mensaje.