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>
Captura de tela da visualização da área de trabalho
Captura de tela do Mobile View
Demonstração ao vivo-Js-Fiddle
Usando o sistema Grid-layout, esse problema pode ser corrigido ordenando
spec
,content
,button
divs no próprio html. Eu removi o divcontent-buttons
e mantive o html bem simples, como abaixo.Solução Visualização de desktop: Mantenha a ordem dos divs como - 2, 1, 3 especificando o layout usando
grid-template-columns: repeat(2, 1fr);
o qual ocupará apenas 2 colunas em uma linha, então dandogrid-row: 1/-1;
faz com que o 2º div ocupe espaço vertical suficiente e mova o 3º div abaixo do 1º div . Consulte a captura de tela da visualização de desktop para isso.Reserve espaço vertical suficiente em uma única fileira para a 2ª divisão.
Solução para visualização móvel: usar
grid-template-columns: 1fr
fará com que os divs sejam ordenados como - 1,2,3 um abaixo do outro. Agora, eles podem manter a ordem daspecs
classe em segundo usandogrid-row: 2;
e para a classe de conteúdogrid-row: 1
fazer com que ocontent
div permaneça na ordem 1.Solução geral usando Grid abaixo. Por favor, certifique-se de usar a demonstração em js-fiddle. Executar o snippet aqui pode, às vezes, não mostrar o layout, por favor, visualize-o em uma página inteira.
O exemplo abaixo é uma solução sem o wrapper extra em torno de
.content
and.buttons
. Nota: a altura de.content
é inteiramente determinada pelo seu conteúdo e o layout não depende disso (tanto no desktop quanto no celular).Diferenças relevantes entre o OP e este exemplo (não muitas):
Defina as larguras dos itens flexíveis, mantenha a propriedade flex nos padrões (a configuração
flex
não é necessária).Quando estiver na largura da área de trabalho, defina
flex-wrap
parawrap
que.buttons
possa ocupar a segunda linha.Ajuste
.buttons
o alinhamento horizontal atribuindo-omargin-left: auto
para deslocá-lo para a direita.Os detalhes são comentados no exemplo. Visualize no Full pagemodo e redimensione a janela para ver o layout reverter para mobile (largura máxima: 768px).