Html 媒体屏幕上的Swaping div

这里左DIV是可伸缩的，右DIV是固定的。代码按预期工作。唯一的问题是当屏幕大小低于480px时，右DIV向上，左DIV向下。但我希望正好相反

看这里

HTML：

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

---

尝试添加

float:left

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
    float:left
}

---

在媒体查询中尝试以下规则：

@media screen and (max-width: 480px) { 

    .left {
        width: 100%; float: left;
    }

    .right {      
        float: left;
        margin-left: 0;  width: 100%;        
    }

}

---

只需在标记中交换类，因为存在不会产生任何影响的同级，并且它将按照您想要的方式工作。你现在想做的事情是不可能的，因为你不能用那种方式来应用

~combinator分隔两个选择器并匹配第二个选择器 元素，并且两者共享一个公共 家长

*{框大小：边框框}
.left、.right{显示：内联块；最小高度：50px}
.左{
溢出：隐藏；
宽度：计算（100%-220px）；/*这是主宽度-（.右宽度+10x2边缘右下）*/
边框：2px虚线#f0f；
右边距：10px
}
.对{
宽度：200px；
边框：2个虚线#00f
}
@媒体屏幕和屏幕（最大宽度：480px）{
.左、.右{宽度：100%}
}

能否请您在JSFIDLE中分享您的代码，以便我们了解实际问题我不擅长CSS，请看这里谢谢您的帮助。

@media screen and (max-width: 480px) { 

    .left {
        width: 100%; float: left;
    }

    .right {      
        float: left;
        margin-left: 0;  width: 100%;        
    }

}