Responsive design 使用媒体查询重新订购容器

我想在特定设备上查看网页时重新订购一些容器

我现在有三个div在左边浮动。两个较小的div位于较大div的两侧。但是，当媒体查询开始时，a希望三个div中间的一个位于其他两个div之上。从理论上讲，将其位置从第二位改为第一位

这在纯CSS中是可能的吗？或者我需要让jQuery参与进来吗？我已经在这里为任何能帮助我初步尝试的人设置了一个测试小提琴，但到目前为止，我没有任何乐趣

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重新订购响应容器？对于基于

浮动的布局，不需要。在只有一个浮动侧栏的情况下，这是可能的，但不能有两个浮动侧栏

如果您将布局调整为不使用
浮动
，那么这肯定是可能的

注意：我强烈建议您使用移动优先的CSS方法，使用
minwidth
媒体查询。但是，由于您在示例中使用了
max width
，我也将在我的示例中使用：

使用
位置：绝对
：
将希望位于顶部的元素作为HTML标记中的第一个元素，并使用
position:absolute
将侧边栏定位到两侧。给父元素
位置：相对
，并给它一个
填充
值，该值等于侧栏的
宽度

然后，通过媒体查询，删除设置的
填充
和
位置：绝对

示例：

HTML:


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

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

}

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

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