CSSには予め、左右反対のバージョンを用意しております。
style.css
/*-------------------------------- PCのレイアウト(右サイドバー) ---------------------------------*/ #contentInner { float: left; width: 100%; margin-right: -300px; } main { margin-right: 320px; margin-left: 0px; background-color: #fff; border-radius: 4px; padding: 0px 10px 20px 0px; } #side aside { float: right; width: 300px; padding: 0px; } /*-------------------------------- PCのレイアウト(左サイドバー) #contentInner { float: right; width: 100%; margin-left: -280px; } main { margin-right: 0px; margin-left: 300px; background-color: #fff; border-radius: 4px; padding: 0px 0px 20px 10px; } #side aside { float: left; width: 280px; padding: 0px; } ---------------------------------*/
上記の部分を
/*-------------------------------- PCのレイアウト(左サイドバー) ---------------------------------*/ #contentInner { float: right; width: 100%; margin-left: -280px; } main { margin-right: 0px; margin-left: 300px; background-color: #fff; border-radius: 4px; padding: 0px 0px 20px 10px; } #side aside { float: left; width: 280px; padding: 0px; }
とするだけでサイドバーが反対になります。
※左サイドバーにした場合、見栄えの調整で幅が300px→280pxに変更になります。