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

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

看问题:(对不起，刚才意识到图像中的“宽模式”和“小模式”互换了） 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，并在原始代码中添加了 position：relative 和 bottom：100px 。< / p>

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;