post

Mudando ordem das DIVs apenas com CSS

Publicado em: 11/10/2022

Categorias: BlogCSS

É possível trocar a ordem de apresentação de qualquer estrutura HTML como DIVs, Sections e etc, apenas com a função display flex e flex-direction CSS.

Veja abaixo um exemplo:

<div class="flex-container">
   <div id="a">A</div>
   <div id="b">B</div>
   <div id="c">C</div>
</div>

<style>
  .flex-container {
    display: flex;
    flex-direction: column;
  }
  #a {
    order: 2;
  }
  #b {
    order: 1;
  }
  #c {
    order: 3;
  }
</style>

Mais informações: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/2045

ID de Referência: 2045

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários