Início / user-1126760

pab's questions

Martin Hope
pab
Asked: 2025-02-13 06:08:05 +0800 CST
  • 5

Então, estou tendo problemas ao tentar trocar as divs 1 e 2 no celular.

No celular, a ordem deve ser as divs 1, 2 e 3 empilhadas nessa ordem.

Então, acima de 768px, a ordem precisa ser div 2 à esquerda definida em 30% de largura. Então, à direita, divs 1 e 3 precisam ser empilhadas, ocupando o restante à direita.

Não tenho certeza de como posso fazer isso. Eu tentei sem o wrapper, mas não consegui fazer funcionar, isso é o mais próximo que consegui.

Alguém pode me ajudar, por favor?

.container {
  display: flex;
  flex-direction: column; 
  gap: 10px;
}


@media (min-width: 768px) {
  .container {
    flex-direction: row; 
  }

  .specs {
    flex: 0 0 30%; 
    order: 1; 
  }

  .content-buttons {
    flex: 0 0 70%; 
    display: flex;
    flex-direction: column; 
    gap: 10px;
    order: 2; 
  }

  .content {
    flex: 1; 
    order: 1;
  }

  .buttons {
    flex: 1; 
    order: 2;
  }
}

/* Borders for visualization */
.content {border: 1px solid red;}
.specs {border: 1px solid green;}
.buttons {border: 1px solid blue;}
<div class="container">
  <div class="specs">2</div>
  <div class="content-buttons">
    <div class="content">1</div>
    <div class="buttons">3</div>
  </div>
</div>

html