CSS로 페이지 레이아웃 재배치

Question

모바일보기에서 CSS를 사용하여 웹 페이지의 위치를 ​​변경하고 싶습니다. 현재 데스크톱 용으로 설정 한 항목은 왼쪽에 떠있는 사이드 바이고 오른쪽에있는 텍스트 상자입니다. 다음과 같이 HTML은 다음과 같습니다

<div id="container"> 
    <div id="sidebar">...</div> 
    <div id="textbox">...</div> 
</div> 

내 딜레마는 모바일 장치에서 나는 텍스트 상자 아래에 표시하는 사이드 바 콘텐츠를 원하는 나는이 작업을 수행 할 수있는 CSS를 생산하기 위해 고군분투하고 있다는 점이다. 예 :

누구에게도 CSS를 제공 할 수 있습니까? 미리 감사드립니다.

Answer 1

그것은 그렇게하기 위해, 아주 간단 당신은 이것을 다음과 같이 사용해야합니다 :

<div id="container"> 
    <div id="textbox">...</div> 
    <div id="sidebar">...</div> 
</div> 

먼저 텍스트 상자는 모바일 용 float를 제거 할 것이기 때문에 먼저 사용해야합니다. 그래서 텍스트 박스는 먼저 사이드 바를갑니다.

는 CSS :이 도움이

.textbox { 
    width: ***px; 
    float right; 
} 
.sidebar { 
    width: ***px; 
    float left; 
} 
@media screen and (max-width:479px) { 
    /* Target portrait smartphones */ 
    .textbox, .sidebar { 
    float: none; 
    } 
} 

희망! :)

Answer 2

그것은 당신의 HTML에서 #textbox 후이 늘 효과 바탕 화면보기를 #sidebar을 가지고 가장 쉬운 것, 다음 모바일 그냥 수레를 제거 할 수 있습니다

@media screen and (max-width:479px) { 
    #sidebar, #textbox { 
    float: none; 
    } 
}