반응 형 디자인 CSS DOM 요소 조작

Question

입력 필드와 레이블 요소를 포함하는 div 필드가 있습니다. 둘 다 표시됩니다. 블록

<div class="cf-full"> 
    <input id="a" > 
    <label class="helptext"</label> 
</div> 

정상적인보기에서 입력 필드가 먼저옵니다. 그러나 레이아웃이 응답 성이 좋기 때문에 모바일에서는 레이블이 먼저 표시됩니다.

나는이 DOM 조작이 자바 스크립트로 쉽게 달성 될 수 있음을 알고있다. 하지만 순수한 CSS에 의해 역방향 DOM 요소 순서를 얻을 수있는 방법이 있습니까?

Answer 1

이

div { 
    display:table; 
} 
input { 
    display:table-footer-group; 
} 
label { 
    display:table-header-group; 
} 

http://jsfiddle.net/v8xTC/

Answer 2

가됩니다 예 : 그것은 분명 아니었다으로 COMENT 후 : http://jsfiddle.net/SuWLr/

<style type="text/css"> 
.cf-full input, 
.cf-full label{ 
    float:left; 
} 
@media all and (max-width: 300px){ 
    .cf-full input, 
    .cf-full label{ 
     float:right; 
    } 
} 
</style> 

<div class="cf-full"> 
    <input id="a" /> 
    <label class="helptext">Label</label> 
</div> 

UPDATE를 (당신이 어떻게되는지 jsfiddle 뷰포트의 크기를 조정할 수 있습니다) :이 같은 노력하고 있습니다 라벨의 위/아래 (위/아래)가 바뀌어서 어쩌면 도움이 될지도 모릅니다. 일부 positiong 스타일과 유사한

뭔가 : http://jsfiddle.net/SuWLr/1/

.cf-full { 
    position:relative; 
} 
.cf-full input, 
.cf-full label{ 
    display:block; 
    position:absolute; 
} 
.cf-full input {left:0;top:20px;} 
.cf-full label{left:0;top:0px;} 

@media all and (max-width: 300px){ 
    .cf-full input {left:0;top:0px;} 
    .cf-full label{left:0;top:20px;} 
}