Mudando ordem das DIVs apenas com CSS - Bruno Devx - BR Criativus

post #2045

Mudando ordem das DIVs apenas com CSS

Publicado em: 11/10/2022 / Atualizado 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

Publicações recomendadas:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=2045

ID de Referência: 2045

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato