响应式布局：如何在智能手机布局中切换位置

Question

我该如何解决这个响应式布局案例： 我有三个盒子。 在宽屏幕上，我希望其中两个在左侧，宽度固定，另一个在右侧。 在小屏幕上，我希望所有框都变成 100%，而正确的框位于其他两个之间。

我做了一个几乎可以工作的小提琴，但我需要在宽模式下消除这个差距。

https://jsfiddle.net/ypmgo7no/3/

.leftfixed {
  float:left;
  width:200px;
  background:purple;
  height:50px;
}

.right {
  margin-left:220px;
  background:yellow;
  height:100px;
}

@media (max-width:500px) {
  .leftfixed {
    float:none;
      width:100%;
      background:blue;
   }

   .right {
     margin-left:0;
     }
}

看到问题：（不好意思，刚刚发现图片中的“Wide mode”和“Small mode”互换了） Image

Answer 1

你想要这样吗？

.leftfixed {
  float:none;
  width:200px;
  background:purple;
  height:100px;
}

.right {
    left: 220px;
    background: yellow;
    height: 200px;
    position: absolute;
    width: 100%;
    top: 7px;
  }

@media (max-width:500px) {
  .leftfixed {
    float:none;
      width:100%;
      background:blue;
   }
   
   .right {
     margin-left:0;
     position:inherit;
     
     }
}

<div class="leftfixed">
box left fixed width 1
</div>

<div class="right">
box right
</div>

<div class="leftfixed">
box left fixed width 2
</div>

Answer 2

这是我在最后一个 div 中添加类 bottom 并在原始代码中添加 position:relative 和 bottom:100px 的另一种方法。

.leftfixed {
  float:left;
  width:200px;
  background:purple;
  height:100px;
}

.right {
    margin-left: 220px;
    background: yellow;
    height: 200px;
    /*position: absolute;*/
    width: 100%;
    top: 7px;
  }
  .bottom{
  	    position: relative;
    	bottom: 100px;
  }

@media (max-width:500px) {
  .leftfixed {
    float:none;
      width:100%;
      background:blue;
   }
   
   .right {
     margin-left:0;
   
     
     }
}

<div class="leftfixed">
box left fixed width 1
</div>

<div class="right">
box right
</div>

<div class="leftfixed bottom">
box left fixed width 2
</div>