이 CSS 그리드 레이아웃에서 어떻게 열을 재정렬 하시겠습니까?

Question

나는 다음과 같은 템플릿을 사용하고 있습니다 :

http://www.styleshout.com/templates/preview/KeepItSimple11/index.html

첫 번째 열은 오른쪽으로 따라 두보다 넓은. 간단히 말해, 더 넓은 첫 번째 열이 두 개의 더 좁은 열 사이의 두 번째 열이되도록 레이아웃 순서를 변경하려고합니다. 나는 그리드 기반의 CSS 레이아웃으로 상당한 시간을 보냈지 만 이것을 달성하는 데 거의 오지 않았다. 나는 이것을 달성하는 방법에 대한 지침을 주시면 감사하겠습니다. 하나 이상의 방법이 있습니까?

편집 : 제안 해 주셔서 감사합니다. 그러나 가능한 경우 완전한 답변을 제공해주십시오. 해결책을 완료하는 데 응답을 어떻게 적응 시킬지 잘 모르겠습니다.

Answer 1

"position : relative"를 사용해 보셨습니까?

#left-row { 
    position:relative; 
    left:100px; 
} 

#right-row { 
    position:relative; 
    left:-100px; 
} 

Answer 2

이 시도 : 당신의 지금은 가운데 열 측면 열보다 특히 더 이상 어느 경우

div#content-wrapper #main { 
    left:230px; 
    position:absolute; 
    top:0; 
} 
div#footer-wrapper { 
    clear:both; 
} 
div#content-wrapper { 
    left:0; 
    overflow:hidden; 
    position:relative; 
    top:0; 
} 
#left-columns .omega { 
    float:right; 
} 

이 ...하지만, 당신은 문제가있는 것입니다.

Answer 3

css 클래스에서 위치를 변경할 수 있습니다. 다음보십시오 :

#RightContent{ 
left: auto; 
right: 0; 
width: 150px; 
background-color: navy; 
} 

#LeftContent{ 
position: absolute; 
top: 0; 
left: 0; 
width: 200px; 
height: 100%; 
background-color: navy; 
} 

#MiddleContent{ 
position: fixed; 
top: 0; 
left: 200px; 
right: 150px; 
bottom: 0; 
overflow: auto; 
background: #fff; 
}