使用媒体查询交换div位置

Question

当浏览器宽度低于600px时，由于媒体查询，我希望这样的位置更改：

看来这需要交换div位置。这可以用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>

Answer 1

您只需要重置浮动或宽度属性。

在处理浮动元素和非浮动元素时，请注意BFC块格式化上下文。

  

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

＆＃13;

＆＃13;

* {
  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%;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

是的，CSS可以实现。实际上，使用flexbox非常容易，这是专为此类任务而设计的。

* {
  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>

要了解有关flexbox的更多信息，请访问：

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

flexbox的好处：

1. 最小代码;效率很高
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. 响应
6. 与花车和桌子不同，浮动和桌面提供有限的布局容量，因为它们从未用于建筑布局，因此flexbox是一种现代（CSS3）技术，具有广泛的选项。

浏览器支持：

所有主流浏览器except IE 8 & 9都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请使用Autoprefixer。 this answer中的更多详细信息。