post

Inverter ordem das colunas/div com CSS

Publicado em: 16/11/2021 / Atualizado em: 16/11/2021

Categorias: Blog CSS

É possível inverter a ordem do conteúdo na grade com CSS aplicando o código abaixo na class da div.

-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;

Caso precise trocar a ordem da sua DIV somente em dispositivos mobile, use o código abaixo:

@media (max-width: 960px) {
  .inverter {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
}

Aplicando o código acima, o código abaixo:

<div class="inverter">
  <div class="div-1">
    DIV 1
  </div>
  <div class="div-2">
    DIV 2
  </div>
</div>

Terá o resultado como abaixo:

<div class="inverter">
  <div class="div-2">
    DIV 2
  </div>
  <div class="div-1">
    DIV 1
  </div>
</div>

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

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/1163

ID de Referência: 1163

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