반응형 테마를 사용하면서 pc화면에서 메인은 오른쪽, 사이드는 왼쪽에 위치하고 모바일에서는 메인이 위쪽, 사이드는 아래쪽에 위치하고 싶다면 아래와 같이 수정해 보시기 바랍니다.

basic2테마를 예로 들어 설명하며 반응형 테마들은 응용이 가능합니다.

1. 사이드 레이아웃 설정은 오른쪽으로 설정합니다.

2. /layout/head_bs.html 에 main-right-box 클래스명 추가(클래스명은 임의로 적은 것입니다.)

<div class="basic-body-main {? eyoom.pos_side_layout == 'left'}right{:}left{/}-main col-md-9 main-right-box">

3. /layout/side_bs.html 에 main-left-box 클래스명 추가

<div class="basic-body-side {? eyoom.pos_side_layout == 'left'}left{:}right{/}-side col-md-3 main-left-box">

4. /css/custom.css 에 아래의 소스 입력 후 저장

@media (min-width:992px){
    .main-right-box {float:right !important}
    .main-left-box {float:left !important}
}

메인과 사이드 레이아웃(col-md-9, col-md-3)에 클래스명에 flaot 속성 스타일을 줘서 992px 이상에서 메인 레이아웃은 오른쪽으로 사이드레이아웃은 왼쪽으로 위치하게 만들었습니다.

992px이하에서는 콘텐츠의 위치에 따라 메인이 먼저 위에 위치하게 됩니다.

레이아웃 반대의 경우 float속성을 반대로 하시면 되며 변경에 따라 스타일은 맞게 수정하시면 되겠습니다.