使用媒体查询重新排序容器

Question

我想在特定设备上浏览网页时重新订购多个容器。

我目前有三个div漂浮在左边。两个较小的div在较大div的两侧。然而，当媒体查询踢出一个想要三个中间坐在另外两个之上。从理论上讲，它的位置从第2位改为第1位。

纯CSS可以实现吗？或者我需要参与jQuery吗？我已经为任何可以帮助我最初尝试的人设置了一个测试小提琴，但到目前为止我没有任何快乐...... http://jsfiddle.net/r8qZ2/

示例HTML：

<div class="panels">
    <div class="panel-one">Panel 1</div>
    <div class="panel-two">Panel 2</div>
    <div class="panel-three">Panel 3 </div>
</div>

示例CSS：

.panels {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.panel-one, .panel-three {
    width: 24.0625%;
    height: 400px;
    float: left;

    background: red;
}

.panel-three {
    margin: 0 0 0 1.25%;
}

.panel-two {
    width: 49.375%;
    height: 400px;
    float: left;
    margin: 0 0 0 1.25%;

    background: blue;
}

@media only screen and (max-width: 800px) {

.panel-one, .panel-three {
    width: 49%;
    height: 400px;
}

.panel-three {
    margin: 0 0 0 2%;
}

.panel-two {
    width: 100%;
    float: none;
    clear: left;
    margin: 0;
}

}

感谢任何帮助！

Answer 1

使用CSS重新订购响应式容器？使用基于float的布局，没有。在只有一个浮动边栏的情况下，它是可能的，但不是两个。

如果您调整布局不使用floats，那么它肯定是可能的。

注意：我强烈推荐使用min-width媒体查询的CSS移动优先方法。但是，由于您在示例中使用max-width，我也会在我的例子中这样做：

使用position: absolute：

将您想要的元素放在顶部作为HTML标记中的第一个元素，并将侧边栏放在position: absolute的边上。给父元素position: relative，并给它一个padding值等于侧边栏的width。

然后，对于媒体查询，请移除您设置的padding和position: absolute。

示例：

HTML：

<div class="panels">
  <div class="panel-two">Panel 2</div>
  <div class="panel-one">Panel 1</div>
  <div class="panel-three">Panel 3</div>
</div>

CSS：

.panels {
  position: relative;
  padding: 0 25%;
}

.panel-one,
.panel-three {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
}

.panel-one   { left: 0;  }
.panel-three { right: 0; }

@media only screen and (max-width: 800px) {
  .panels {
    padding: 0;
  }

  .panel-one,
  .panel-three {
    position: static;
    width: auto;
  }
}

Here's a pen with your markup adjusted to this

这样做的一个主要缺点是侧边栏被position: absolute从内容流中取出，因此根据您的布局，这可能不是一个可能的解决方案。