스왑 div @ 미디어 화면

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이 그런 식으로 적용될 수 없으므로 지금하려는 것은 불가능합니다.

는 ~ 연결자 두 개의 선택기를 분리하고 상기 제 선행하는 경우에만 상기 제 소자 일치 공통 부모를 공유하는 두.

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

Answer 2

시도 float:left

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

Answer 3

는 미디어 쿼리에서이 규칙을보십시오 추가 :

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

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

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

}