Отзывчивый макет: как переключить позиции в макет смартфона

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

Это еще один метод я добавил класс Дна К последнему ДИВ и добавил позиции: относительную и дна: 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{ 
 
    \t  position: relative; 
 
    \t 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>