반응 형 디자인 객체 변경 위치

Question

가끔 반응 형 사이트를 볼 때 화면 크기가 더 작을 때 두 개의 div가 전체 화면에서 서로 옆에 나타나지만 한쪽이 다른쪽에 표시됩니다.

이 간단한 최대 폭 = %, 폭 = PX의 사용 떠있다 그러나

서로의 상부에 적층 될 때 때때로 전체 화면의 오른쪽에있는 하나의 상위에 표시 작은 디스플레이에.

첫 번째 동작에서는 오른쪽에 DOM 의 첫 번째 동작이 필요하지만 두 번째 동작에서는 DOM 의 두 번째 동작이 필요하며 HTML 파일은 모든 화면 해상도에서 동일해야합니다.

이 효과는 어떻게 발생합니까?

Answer 1

글쎄, 나는 귀하의 질문에 조금 혼란 찾았지만 이것은 내가 이해 한 것입니다 :

• 당신은 당신은 바탕 화면 폭에 오른쪽으로 사이드 바 원하는 반응 형 웹 디자인
• 을 달성 할
• 모바일/소형 화면에서 웹 사이트를 열면 사이드 바 또는 오른쪽의 콘텐츠가 아래쪽이 아닌 맨 위에 표시됩니다. 내가 올바른 생각하면

는 다음이

1. 장소 오른쪽 왼쪽 내용 위의 내용과 거기에 재산 float:right를 추가 ..
2. 장소 아래 왼쪽 컨테이너 .. 그것을 할 수있는 방법입니다 그것은 ..
3. 는 미디어 쿼리를 적용 ..

데모 사용하여 부트 스트랩 : http://jsfiddle.net/YEUwN/95/

0123을

Answer 2

세 개의 div의 경우이 CSS 트릭을 사용할 수 있습니다.

#example {display: table; width: 100%; } 
#block-1 {display: table-footer-group; } 
#block-2 {display: table-row-group; } 
#block-3 {display: table-header-group; } 

<div id="example"> 
    <div id="block-1">First</div> 
    <div id="block-2">Second</div> 
    <div id="block-3">Third</div> 
</div> 

세 번째 초 첫

를 표시 할 것

http://jsfiddle.net/47T89/

그리고 당신은 더 원하는 경우에, 당신은거야가 실제로 W3C 작업 초안 http://www.w3.org/TR/css3-grid-layout/