창 축소시 열 순서 변경

Question

왼쪽 및 오른쪽으로 두 개의 열이 있습니다. 창을 축소하면 오른쪽 열이 왼쪽 열 위에 표시됩니다.

지금 창이 축소되면 오른쪽이 왼쪽 아래로 튀어 나옵니다.

어떻게하면 창을 축소하면 오른쪽 열이 왼쪽 열의 맨 위로 이동하도록 변경할 수 있습니까?

여기에 내 코드와 바이올린의 : 사람이 올바른 방향으로 날 지점 수 있다면 http://jsfiddle.net/1m6n2dz8/1/

.descright { 
float: right; 
width: 40%; 
} 
.descleft { 
float:left; 
width:60%; 
} 
.group { 
margin:0 6%; 
} 

@media screen and (max-width: 480px) { 
.descleft, .descright { 
float: none; 
width: auto; 
} 
} 

, 나는 그것을 정말 감사하겠습니다!

Answer 1

을 간단하게 HTML 컬럼의 순서를 교체 .

.descright { 
 
    float: right; 
 
    width: 40%; 
 
} 
 
.descleft { 
 
    float: left; 
 
    width: 60%; 
 
} 
 
.group { 
 
    margin: 0 6%; 
 
} 
 
@media screen and (max-width: 480px) { 
 
    .descleft, 
 
    .descright { 
 
    float: none; 
 
    width: auto; 
 
    } 
 
}

<div class="group"> 
 
    <div class="descright">Right</div> 
 
    <div class="descleft">Left</div> 
 
</div>

Answer 2

쉬운 방법은 HTML 소스 순서에서 오른쪽 열을 먼저 넣는 것입니다. 가까운 장래에, 우리는이 점에서 더 많은 유연성을주는 그리드 레이아웃을 갖게 될 것이지만 아직 준비가되어 있지 않습니다.

Answer 3

는 어쩌면 마크 업 순서를 변경, 일부 left 큰 폭의 열을 교환하는 속성을 추가 할 것을 레이아웃을 얻으려면 :

.descright { 
 
    float: right; 
 
    width: 40%; 
 
    left: -60%; 
 
} 
 
.descleft { 
 
    float: left; 
 
    width: 60%; 
 
    left: 40%; 
 
} 
 
.group { 
 
    margin: 0 6%; 
 
} 
 
@media screen and (max-width: 480px) { 
 
    .descleft, 
 
    .descright { 
 
    float: none; 
 
    width: auto; 
 
    } 
 
}

<div class="group"> 
 
    <div class="descright"> 
 
    Right 
 
    </div> 
 
    <div class="descleft"> 
 
    Left 
 
    </div> 
 
</div>