diff --git a/_data/data.yml b/_data/data.yml
index c2b1d38..515cb87 100644
--- a/_data/data.yml
+++ b/_data/data.yml
@@ -3,6 +3,7 @@
 #
 
 sidebar:
+    position: left # position of the sidebar : left or right
     about: True # set to False or comment line if you want to remove the "how to use?" in the sidebar
     education: True # set to False if you want education in main section instead of in sidebar
 
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 1887447..344d00f 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -45,7 +45,7 @@ p {
 
 .sidebar-wrapper {
   grid-column: span 3;
-  order: 2;
+  order: $sidebar-order;
   background: $theme-color;
   color: #fff;
   a {
@@ -161,6 +161,7 @@ p {
 
 .main-wrapper {
   grid-column: span 7;
+  order: $resume-order;
   background: #fff;
   padding: 60px;
   .section-title {
diff --git a/assets/css/main.scss b/assets/css/main.scss
index cd8fc2b..d51d90f 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -4,5 +4,15 @@
 
 @charset "utf-8";
 
+
+// define variable with front matter
+{% if site.data.data.sidebar.position == 'left' %}
+$resume-order: 2;
+$sidebar-order: 1;
+{% else %}
+$resume-order: 1;
+$sidebar-order: 2;
+{% endif %}
+
 @import "skins/{{ site.theme_skin | default: 'blue' }}"; // skin
 @import "default"; // main partials