Swap div position with media query

问题:

When browser width becomes under 600px, I'd like such a position change, thanks to a media query :

It seems that this would need to swap div position. Is this possible with CSS?

* { padding: 0; margin: 0; }
#a { float: left; background-color: red; width: 150px; }
#b { background-color: blue; }
#c { float: right; width: 40%; background-color: yellow; }
@media (max-width: 600px) { 
        /* ... */
}

<div>
   <div id="a">a</div>
   <div id="c">c</div>
   <div id="b">b</div>
</div>

回答1:

You only need to reset the float or width properties.

Do mind the BFC block formating context when you deal with floating and non floatting elements.

http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

* {
  padding: 0;
  margin: 0;
}
#a {
  float: left;
  background-color: red;
  width: 150px;
}
#b {
  background-color: blue;
}
#c {
  float: right;
  width: 40%;
  background-color: yellow;
}
@media (max-width: 600px) {
  #c {    
    width: 100%;
  }
}

<div>
  <div id="a">a float</div>
  <div id="c">c float or not</div>
  <div id="b">b</div>
</div>

回答2:

Yes, it's possible with CSS. In fact, it's quite easy with flexbox, which is designed for such a task.

* {
  padding: 0;
  margin: 0;
}

#container {
  display: flex;                    /* establish flex container */
}

#a {
  flex: 0 0 150px;                  /* don't grow, don't shrink, fixed at 150px width */
  background-color: red;
}
#b {
  flex: 1;                          /* consume all available free space in the row */
  background-color: aqua;
}
#c {
  flex: 0 0 40%;                    /* don't grow, don't shrink, fixed at 40% width */
  background-color: yellow;
}
@media (max-width: 600px) {
  #container { flex-wrap: wrap; }        /* allow flex items to wrap */
  #b { flex-basis: calc(100% - 150px); } /* take full width less width of #a */
  #c { flex-grow: 1; }                   /* consumer all available free space in the row */
}

<div id="container"><!-- children ordered chronologically; no need to reverse order -->
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
</div>

---

To learn more about flexbox visit:

• Methods for Aligning Flex Items
• Using CSS flexible boxes ~ MDN
• A Complete Guide to Flexbox ~ CSS-Tricks
• What the Flexbox?! ~ YouTube video tutorial

---

Benefits of flexbox:

1. minimal code; very efficient
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. it's responsive
6. unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

---

Browser support:

Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.