Changer l'ordre des divs flottants avec CSS

JSFIDDLE

Je veux changer l'ordre des divs flottants à une certaine taille de pixel.

À l'état par défaut ils ont tous les deux 50% de la largeur et ils sont à côté les uns des autres.

Ci-dessous 600px taille de l'écran (ou w/e n'a pas d'importance) je veux la deuxième div(rouge) flottent au-dessus de la première div(jaune).

Comment est-ce possible avec CSS seule solution?

HTML

<div class="yellow"></div>
<div class="red"></div>

CSS

.yellow {
    background: yellow;
    width: 50%;
    height: 300px;
    float:left;
}

.red {
    background: red;
    width: 50%;
    height: 300px;
    float:left;
}

@media screen and (max-width:600px) {
    .yellow {
        background: yellow;
        width: 100%;
        height: 300px;
        float:left;
    }

    .red {
        background: red;
        width: 100%;
        height: 300px;
        float:left;
    }
}

La solution que je veux c'est:

ROUGE DIV

JAUNE DIV

mais maintenant c'est:

JAUNE DIV

ROUGE DIV

source d'informationauteur vaskort

  1. 20

    Je sais que vous vous demandez comment accomplir cela en utilisant des flotteurs, mais autant que je sache, à l'aide de pure CSS c'est impossible (du moins sans l'aide de méchant positionnement, vous avez dit que vous ne voulez pas le faire).

    Autant que je sache, la seule bonne façon d'accomplir ceci avec du pur HTML/CSS pour utiliser la nouvelle flexbox spec (un bon point de départ serait probablement cette css astuces de l'article).

    Lorsque vous utilisez flexbox vous pouvez utiliser le order de propriété sur les éléments pour déterminer l'ordre d'affichage des éléments dans (duh)

    Vous pouvez voir un exemple de cette action dans le icile code HTML est similaire à ce que vous avez, avec un élément wrapper (j'ai aussi corrigé la déclaration du DOCTYPE):

    <!DOCTYPE html>
<div class="wrapper">
    <div class="yellow">
    </div>
    <div class="red">
    </div>
</div>

    Le CSS est un peu différent:

    .wrapper {
  display: flex;
  flex-flow: row wrap;
}

.yellow {
    background: yellow;
    width: 20%;
    height: 300px;
}

.red {
    background: red;
    width: 20%;
    height: 300px;
}

@media screen and (max-width:600px) {
    .yellow {
        order: 2;
        width: 100%;
    }

    .red {
        order: 1;
        width: 100%;
    }
}

    J'ai aussi nettoyé un peu, vous avez eu de code en double dans votre requête de média qui n'a pas vraiment besoin d'être là.

    Le seul inconvénient c'est qu'il fonctionne actuellement uniquement sur près de 80% des navigateurs comme de l'écriture:

    http://caniuse.com/#search=flexbox

    En fonction de votre marché cible qui pourrait être OK, vous pouvez utiliser la dégradation gracieuse de sorte qu'il s'affiche correctement dans tous les domaines à l'exception de la commande sur les périphériques qui ne prennent pas en charge flexbox entièrement.

    Je suppose que vous êtes aussi le seul vraiment ciblant les appareils mobiles avec la réorganisation des choses, de soutien, il est bon de sorte qu'il pourrait bien fonctionner pour vous.

  2. 6

    Voici une solution simple à l'aide des marges négatives et des flotteurs.

    Pour le CSS, utilisez la commande suivante:

    @media screen and (max-width:600px) {
    .yellow {
        background: yellow;
        width: 100%;
        height: 300px;
        float:left;
        margin-top: 300px;
    }

    .red {
        background: red;
        width: 100%;
        height: 300px;
        float:left;
        margin-left: -100%;
    }
}

    Votre code HTML reste le même que vous avez posté.

    Ajouter une marge supérieure à .yellow à l'aide de margin-top: 300px (égale à la hauteur de la
    div rouge).

    Pour la div rouge, ajouter un négatif à gauche de la marge de 100%.

    Cela va forcer la div rouge pour se positionner sur le jaune div, mais puisque vous
    ont le jaune div une marge supérieure, le jaune div apparaît sous la div rouge.

    L'astuce est similaire à celle utilisée pour le Saint Graal 3-colonne de conception de mise en page.

    Voir démo: http://jsfiddle.net/audetwebdesign/jux84wzk/

  3. 4

    Essayez de changer votre

    HTML -

    <div class="container">
  <div class="yellow"></div>
  <div class="red"></div>
</div>

    et votre @media query CSS -

    @media screen and (max-width:600px) {
.container{
    display:flex;
    flex-direction: column-reverse;
}
.yellow {
    background: yellow;
    width: 100%;
    height: 300px;

}

.red {
    background: red;
    width: 100%;
    height: 300px;


} }
  4. 2

    Jusqu'à présent, il n'y a aucun mobile premières réponses, ce qui est moins de lignes de css, et d'autres avantages. Cela ne touche le htmldonc ce n'est pas le cas des OP question, pour une CSS approche c'est la Flexbox réponse à partir de deux autres potes, que j'ai voté.

    DÉMO: http://jsfiddle.net/mhrf6d4n/

    HTML, mettre en ordre de la source de la plus petite fenêtre d'affichage de la première:

    <div class="red"></div>
<div class="yellow"></div>

    CSS (mettre le partage, global sur toutes les fenêtres à l'extérieur des requêtes de médias, de combiner partagé sélecteurs, puis après avoir mis le min-width et de mettre votre flotte)

    .yellow, .red {
    background: yellow;
    height: 300px;
}
.red {
    background: red;
}

@media screen and (min-width:600px) {
    .yellow, .red {
        float:left;
        width:50%;
    }
}