javascript - 响应式CSS div定位优先级

Question

首先我要感谢这个社区的成员对我的巨大帮助上个月在这里找到。如果没有您的提示和技巧，我没有完成任何一个元素。

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

我有这样的布局: 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;

}

有一个外箱(outer)和两个内箱(Div1和mitte_rechts)。在“mitte_rechts”中还有两个框(Div 2、Div3)并且它们都对齐。我想要的是，当窗口缩小到断点 (768) 时，第一个 Div3 显示在 mitte_rechts 中的 Div2 下。也许我只是笨手笨脚但是有解决办法吗？到目前为止，没有使用 JS。

提前致谢。

Answer 1

尝试以下操作:

.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。行内 block 是 float 的替代方法。所以要么使用 float 要么内联 block 。我不喜欢 inline-block，因为 IE6 和 IE7 不支持它。