Css3 , flexbox + table

[luiz filipe 0]

Olá galera,

Estou fazendo alguns testes com o flexbox e aproveitar e implementar em um serviço, porém vem a dúvida.

É possível realizar a troca de div's dentro de " Pai " deferente, ou seja, existir duas div's pai e nelas div's filhos, a mudança tem que ocorrer entre as div's filhos de ambos os pais!

Entenderam? rsrs'

 

Simplificando: Mudar todos os filhos mesmo existindo pais diferentes.

 

<div class="A">

<div class="order-1"></div>

<div class="order-2"></div>

</div>

 

<div class="B">

<div class="order-3"></div>

<div class="order-4"></div>

</div>

 

exemplo : mudar para 4, 3 , 2 ,1 - assim os elementos do order-4 vão está na classe A.

 

Desde ja Obrigado.

Att.,

Lucklf

 

 

:(

Ninguém sabe dizer se é possível? Estou alguns dias fazendo testes e pesquisando, mas nada encontrado.

Obrigado!

[Electronic 124]

você quer trocar as divs,de lugar? tirar as divs de entro de A e por dentro de B?

Só com CSS acho que nao dá,

O que da pra fazer é trocar/alternar as classes pai (a vira b e b vira a)

 

Se quer mudar a estrutura html use JS

[luiz filipe 0]

Eu já consegui usando o CSS3 - Flexbox alternar as div`s A por B , C , D assim vai, mas tem que está dentro do mesmo pai. O que eu quero e fazer o mesmo porém alternar de pai diferente.

Para o flexbox funcionar temos que usar alguns métodos de programação diferente, como:

 

display: -webkit-flex;

display: flex;

flex-wrap: wrap;

justify-content: space-around;

flex-direction: row;
---

-webkit-flex: 1 1 auto;

flex: 1 1 auto;
---

E no final temos a magia de divs mudarem de posições mantendo o conteúdo dentro:

 

.order-A {-webkit-order:4;}

.order-B {-webkit-order:2;}

.order-C {-webkit-order:3;}

.order-D {-webkit-order:1;}

Em fim, nesse caso como especifiquei anteriormente funcionou no pai da div e as filhas mudaram de posição. Conheço o JS e sei que por ele é mais fácil, mas estou utilizando isso em newslatter com table, tr, td (...), onde o JS não é amigável.