Ordenar div

Adriano_Alves · 3 de maio de 2017

Pessoal, preciso de uma ajuda urgente. Sou bastante leigo no programação, por isso que estou tirando minhas dúvidas com quem entende.

Não estou conseguindo ordenar minhas divs feitas em HTML5.

Tenho a seguinte situação básica:

<!doctype html>
<html>
<head>
</head>

<body>
       <div>
            <div>  10 </div>
            <div>  2   </div>
            <div>  1   </div>
            <div>  20 </div>
            <div>  3   </div>
      </div>
</body>
</html>

Agora não sei como ordená-las em ordem crescente ou decrescente. Se alguém puder me ajudar agradeço.

DiF · 3 de maio de 2017

@Adriano_Alves Olá, seja bem vindo em nosso Clube do Hardware.

Você pode fazer uma ordenação via CSS usando o flex.

Ou usar um plugin jQuery que faça isso( clicar e arrastar)

Ambos são de jeitos manuais, mas você pode usar o jquery para manipular o CSS para fazer a ordem crescente ou decrescente.

Com Flex é bem simples, vou usar seu código como exemplo:

<div id="flex">
    <div class="a">  10 </div>
    <div class="b">  2  </div>
    <div class="c">  1  </div>
    <div class="d">  20 </div>
    <div class="e">  3  </div>
</div>

CSS:

#flex { 
  display: flex; 
  
  /* opcional, se você quer que o elemento DIV ocupe 100% de width */ 
  flex-direction: column;
}


#flex > .a { order: 4; }
#flex > .b { order: 2; }
#flex > .c { order: 1; }
#flex > .d { order: 5; }
#flex > .e { order: 3; }