html - 交换 div @media 屏幕

Question

这里左边的 DIV 是可伸缩的，右边的 DIV 是固定的。代码按预期工作。唯一的问题是当屏幕尺寸低于 480px 时，右边的 DIV 会上升，而左边的 div 会下降。但我希望恰恰相反。

请参阅此处 http://jsfiddle.net/ask2asim/wcjo4zLs/

HTML:

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

CSS:

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

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f
}


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

    .left {
    width: 100%;
}

.right {
    width: 100%;
}

}

Answer 1

只需在您的标记中交换类，因为有些兄弟不会产生任何影响，它会按照您想要的方式工作。自 General sibling selector 以来，您现在无法执行您正在尝试执行的操作。不能那样应用。

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

*{box-sizing: border-box}
.left, .right{display: inline-block; min-height: 50px}
.left {
    overflow: hidden;
    width: calc(100% - 220px); /*This is the parent width - (.right width + 10x2 marginRight bellow)*/
    border: 2px dashed #f0f;
    margin-right: 10px
}

.right {
    width: 200px;
    border: 2px dashed #00f
}
@media screen and (max-width: 480px) {
    
    .left, .right {width: 100%}

}

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

另一种选择是 list 元素和 direction: ltr/rtl