javascript - 自适应CSS div定位优先级

首先，我要感谢这个社区的成员，感谢我的大量帮助
最近几个月在这里找到。没有您的提示和技巧，我最终完成了我的一个项目。

现在，我在响应式布局方面遇到问题，需要您的帮助：

我有这样的布局：
http://codepen.io/Buzzjump/pen/tfeys

<div class='outer'>
<div class='sidebar_links'>Div1</div>
<div class='mitte_rechts'>
<div class='d2'>Div2</div>
<div class='d1'>Div3</div>
</div>
</div>

现在是当前的CSS

div{
  display:inline-block;
  background-color:#cdcdcd;
  margin:0px; 0;padding:0px;width:150px}
.d1{
    float:right;
    background: blue;
  color: white;
}
.d2{
  background: orange;
}
.mitte_rechts{
    padding:0;
    width:70.81%;
  float: left;
  margin-left:0px;
}

.sidebar_links{
    height: 200px;
    float: left;
  background: red;
}

.outer{
    height: 230px;
  min-width: 80%;
  background-color:yellow;
  margin-left: 20px;
  overflow: hidden;

}

有一个外部框（外部）和两个内部框（Div1和mitte_rechts）。在“ mitte_rechts”中，还有两个框（Div 2，Div3），并且它们都对齐。我想要的是，当窗口缩小到断点（768）时，第一个Div3显示在mitte_rechts的Div2下。也许我只是头脑呆滞，但是有解决方案吗？
到目前为止，没有使用JS。

提前致谢。

最佳答案

尝试以下方法：

.d1 {
    float: right;
    background: blue;
    color: white;
}

.d2 {
    background: orange;
    float: left;
}

@media screen and (max-width: 768px) {
    .d1, .d2 {
        float: none;
        display: block;
    }
}

顺便说一句：您的div上不需要inline-block。内联块是浮动的替代方法。因此，要么使用浮动块，要么使用内联块。我不喜欢内联块，因为IE6和IE7不支持它。