可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

JSFIDDLE

I want to change the order of floated divs at a certain pixel size.

At default state they both have 50% width and they are next to each other.

Below 600px screen size (or w/e does not matter) I want the second div(red one) float above first div(yellow one).

How is this possible with CSS only 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;
    }
}

The solution I want is:

RED DIV

YELLOW DIV

but now it is:

YELLOW DIV

RED DIV

回答1:

I know that you're asking how to accomplish this utilising floats, but as far as I know using pure CSS this is impossible (at least without using nasty positioning, which you've said you don't want to do).

As far as I know the only nice way to accomplish this with pure HTML/CSS is to utilise the new flexbox spec (a good starting point would probably be this css tricks article).

When you use flexbox you can use the order property on items to dictate which order items appear in (duh)

You can see an example of this in action here, the HTML code is similar to what you have, with an added wrapper element (I also fixed the DOCTYPE declaration):

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

The CSS is a little different:

.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%;
    }
}

I've also cleaned it up a little, you had duplicate code in your media query which didn't really need to be there.

The only downside to this is that it currently only works on around 80% of browsers as of writing:

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

Depending on your target market that might be OK, you could use graceful degradation so that it appears correctly in all ways except the ordering on devices that don't support flexbox fully.

I guess you're also only really targeting mobile devices with reordering things, support there is good so it might work well for you.

回答2:

Here is a simple solution using negative margins and floats.

For the CSS, use the following:

@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%;
    }
}

Your HTML remains the same as you posted.

Add a top margin to .yellow using margin-top: 300px (equal to the height of the red div).

For the red div, add a negative left margin of 100%.

This will force the red div to position itself over the yellow div, but since you have the yellow div a top margin, the yellow div pops out under the red div.

The trick is similar to that used for the Holy Grail 3-column layout design.

See demo: http://jsfiddle.net/audetwebdesign/jux84wzk/

回答3:

Try to change your

HTML to this -

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

and your @media query CSS to this -

@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:

So far, there are no mobile first answers, which is fewer lines of css, and other benefits. This does touch the html, so it's not the OP's question, for a CSS only approach it's the Flexbox answer from two other peeps, which I have voted up.

DEMO: http://jsfiddle.net/mhrf6d4n/

HTML, put in source order of the smallest viewport first:

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

CSS (put the shared, global to all viewports outside of media queries, combine shared selectors, then after put the min-width and put your floats in there)

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

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