CSS-将100%宽度的div包装在另一个[jsfiddle]下

在响应式布局中，我有两列。左栏是侧栏，右栏是内容

使用媒体查询，当屏幕宽度很小时，列将变为100%宽度并堆叠在彼此的顶部

在本例中，我希望侧栏（第一个div）显示在内容（第二个div）下面

我试着在一个小屏幕上使用

float:right

，当它达到100%时，但是在100%宽度时，float显然并不重要

.left, .right {
  width: 100%;
  float: left;
  background: green;
}
.left {
  float: right;
  background: red;
}
.half {
  width: 50%;
}
.space {
  width: 100%;
  display: block;
  height: 40px;
}

在网页上：

<div class="left half"> <!-- To mimic full screen size -->
Left
</div>
<div class="right half">
Right
</div>

<div class="space"></div>

<div class="left"> <!-- To mimic small screen size -->
Left
</div>
<div class="right"><!-- This should appear first -->
Right
</div>

左边
赖特
左边
赖特

这是小提琴：

---

我敢肯定这不是第一次有人想把侧边栏包装在内容下，我只是没能找到解决方案。

你可以使用

display:flex属性与
弹性方向相结合
以重新排序您的div。Ref:
您可以使用
display:flex
并使用属性更改
元素的顺序。虽然浮动有助于水平对齐，但对垂直对齐几乎没有帮助，以下是一个示例：


.flex{
显示器：flex；
柔性流：行换行；
}
.左{
顺序：2；
弹性：1050%；
背景：红色；
}
.对{
顺序：1；
弹性：1050%；
背景：绿色；
}
.满{
边缘顶部：20px；
}
.full>.left，
.full>。对{
弹性：10100%；
}

左边
赖特
左边
赖特
记住在HTML元素的class属性中引用相关类名

您的CSS
display:block
应该可以做到这一点，否则请尝试以下操作：
float:左

在
div
元素上使用：
display:block
时，不需要指定
width:100%
，因为如果没有任何其他阻碍，它应该自动跨越宽度

确保这些元素的
位置
是“相对的”，否则可能无法按预期工作；可能会在全球范围内声明，某些特定的标记应该显示为“绝对”，这可能会破坏您试图实现的目标。
添加一个JSFIDLE以澄清您的答案在引导中完成的操作