diff --git a/less/_01-base.less b/less/_01-base.less
index 3194abc..5410fdd 100644
--- a/less/_01-base.less
+++ b/less/_01-base.less
@@ -283,103 +283,3 @@ table {
 	margin-bottom: @medium-value;
 }
 
-/* ----------------------------- */
-/* ==layout and modules          */
-/* ----------------------------- */
-
-/* simple blocks alignment */
-.left {
-	margin-right: auto;
-}
-
-.right {
-	margin-left: auto;
-}
-
-.center {
-	margin-left: auto;
-	margin-right: auto;
-}
-
-/* text and contents alignment */
-.txtleft {
-	text-align: left;
-}
-
-.txtright {
-	text-align: right;
-}
-
-.txtcenter {
-	text-align: center;
-}
-
-/* floating elements */
-.fl {
-	float: left;
-}
-
-img.fl {
-	margin-right: @small-value;
-}
-
-.fr {
-	float: right;
-}
-
-img.fr {
-	margin-left: @small-value;
-}
-
-img.fl,
-img.fr {
-	margin-bottom: @tiny-value;
-}
-
-
-/* module, gains superpower "BFC" Block Formating Context */
-.mod {
-	overflow: hidden;
-}
-
-/* blocks that needs to be placed under floats */
-.clear,
-.line,
-.row {
-	clear: both;
-}
-
-/* blocks that must contain floats */
-.clearfix,
-.line {
-	&:after {
-		content: "";
-		display: table;
-		clear: both;
-		border-collapse: collapse;
-	}
-}
-
-/* table layout */
-.row {
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-}
-
-.row > *,
-.col {
-	display: table-cell;
-	vertical-align: top;
-}
-
-/* no table-cell for script tag when body is a .row */
-body > script {
-	display: none !important;
-}
-
-/* inline-block */
-.inbl {
-	display: inline-block;
-	vertical-align: top;
-}
diff --git a/less/_02-layout.less b/less/_02-layout.less
index dca68b7..93aa8cb 100644
--- a/less/_02-layout.less
+++ b/less/_02-layout.less
@@ -1,31 +1,130 @@
+/* ----------------------------- */
+/* ==layout and modules          */
+/* ----------------------------- */
+
+/* module, gains superpower "BFC" Block Formating Context */
+.mod {
+	overflow: hidden;
+}
+
+/* blocks that needs to be placed under floats */
+.clear,
+.line,
+.row {
+	clear: both;
+}
+
+/* blocks that must contain floats */
+.clearfix,
+.line {
+	&:after {
+		content: "";
+		display: table;
+		clear: both;
+		border-collapse: collapse;
+	}
+}
+
+/* simple blocks alignment */
+.left {
+	margin-right: auto;
+}
+
+.right {
+	margin-left: auto;
+}
+
+.center {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+/* text and contents alignment */
+.txtleft {
+	text-align: left;
+}
+
+.txtright {
+	text-align: right;
+}
+
+.txtcenter {
+	text-align: center;
+}
+
+/* floating elements */
+.fl {
+	float: left;
+}
+
+img.fl {
+	margin-right: @small-value;
+}
+
+.fr {
+	float: right;
+}
+
+img.fr {
+	margin-left: @small-value;
+}
+
+img.fl,
+img.fr {
+	margin-bottom: @tiny-value;
+}
+
+/* table layout */
+.row {
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+}
+
+.row > *,
+.col {
+	display: table-cell;
+	vertical-align: top;
+}
+
+/* no table-cell for script tag when body is a .row */
+body > script {
+	display: none !important;
+}
+
+/* inline-block */
+.inbl {
+	display: inline-block;
+	vertical-align: top;
+}
+
 /* flexbox layout
 http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 */
 
-.flex {
+.flexbox,
+.flexbox-v {
 	display : flex;
-}
-
-.flex-h {
-	flex-direction: row;
-}
-
-.flex-v {
+	flex-wrap: wrap;
 	flex-direction: column;
 }
 
-.flex-fluid {
+.flexbox-h {
+	flex-direction: row;
+}
+
+.flexitem-fluid {
 	flex: 1;
 }
 
-.flex-start {
+.flexitem-first {
 	order : -1;
 }
 
-.flex-mid {
-	order : 1;
+.flexitem-medium {
+	order : 0;
 }
 
-.flex-end {
-	order : 42;
+.flexitem-last {
+	order : 1;
 }
diff --git a/sass/_01-base.scss b/sass/_01-base.scss
index f95d393..2bfd08b 100644
--- a/sass/_01-base.scss
+++ b/sass/_01-base.scss
@@ -275,104 +275,3 @@ video {
 table {
 	margin-bottom: $medium-value; 
 }
-
-/* ----------------------------- */
-/* ==layout and modules          */
-/* ----------------------------- */
-
-/* simple blocks alignment */
-.left {
-	margin-right: auto;
-}
-
-.right {
-	margin-left: auto;
-}
-
-.center {
-	margin-left: auto;
-	margin-right: auto;
-}
-
-/* text and contents alignment */
-.txtleft {
-	text-align: left;
-}
-
-.txtright {
-	text-align: right;
-}
-
-.txtcenter {
-	text-align: center;
-}
-
-/* floating elements */
-.fl {
-	float: left;
-}
-
-img.fl {
-	margin-right: $small-value;
-}
-
-.fr {
-	float: right;
-}
-
-img.fr {
-	margin-left: $small-value;
-}
-
-img.fl,
-img.fr {
-	margin-bottom: $tiny-value;
-}
-
-
-/* module, gains superpower "BFC" Block Formating Context */
-.mod {
-	overflow: hidden;
-}
-
-/* blocks that needs to be placed under floats */
-.clear,
-.line,
-.row {
-	clear: both;
-}
-
-/* blocks that must contain floats */
-.clearfix,
-.line {
-	&:after {
-		content: "";
-		display: table;
-		clear: both;
-		border-collapse: collapse;
-	}
-}
-
-/* table layout */
-.row {
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-}
-
-.row > *,
-.col {
-	display: table-cell;
-	vertical-align: top;
-}
-
-/* no table-cell for script tag when body is a .row */
-body > script {
-	display: none !important;
-}
-
-/* inline-block */
-.inbl {
-	display: inline-block;
-	vertical-align: top;
-}
diff --git a/sass/_02-layout.scss b/sass/_02-layout.scss
index dead3ad..75f8550 100644
--- a/sass/_02-layout.scss
+++ b/sass/_02-layout.scss
@@ -1,29 +1,130 @@
-/* flexbox layout 
-Tutorial: http://knacss.com/demos/tutoriel.html#flex */
-.flex {
+/* ----------------------------- */
+/* ==layout and modules          */
+/* ----------------------------- */
+
+/* module, gains superpower "BFC" Block Formating Context */
+.mod {
+	overflow: hidden;
+}
+
+/* blocks that needs to be placed under floats */
+.clear,
+.line,
+.row {
+	clear: both;
+}
+
+/* blocks that must contain floats */
+.clearfix,
+.line {
+	&:after {
+		content: "";
+		display: table;
+		clear: both;
+		border-collapse: collapse;
+	}
+}
+
+/* simple blocks alignment */
+.left {
+	margin-right: auto;
+}
+
+.right {
+	margin-left: auto;
+}
+
+.center {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+/* text and contents alignment */
+.txtleft {
+	text-align: left;
+}
+
+.txtright {
+	text-align: right;
+}
+
+.txtcenter {
+	text-align: center;
+}
+
+/* floating elements */
+.fl {
+	float: left;
+}
+
+img.fl {
+	margin-right: $small-value;
+}
+
+.fr {
+	float: right;
+}
+
+img.fr {
+	margin-left: $small-value;
+}
+
+img.fl,
+img.fr {
+	margin-bottom: $tiny-value;
+}
+
+/* table layout */
+.row {
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+}
+
+.row > *,
+.col {
+	display: table-cell;
+	vertical-align: top;
+}
+
+/* no table-cell for script tag when body is a .row */
+body > script {
+	display: none !important;
+}
+
+/* inline-block */
+.inbl {
+	display: inline-block;
+	vertical-align: top;
+}
+
+/* flexbox layout
+http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
+*/
+
+.flexbox,
+.flexbox-v {
 	display : flex;
-}
-
-.flex-h {
-	flex-direction: row;
-}
-
-.flex-v {
+	flex-wrap: wrap;
 	flex-direction: column;
 }
 
-.flex-fluid {
+.flexbox-h {
+	flex-direction: row;
+}
+
+.flexitem-fluid {
 	flex: 1;
 }
 
-.flex-start {
+.flexitem-first {
 	order : -1;
 }
 
-.flex-mid {
-	order : 1;
+.flexitem-medium {
+	order : 0;
 }
 
-.flex-end {
-	order : 42;
+.flexitem-last {
+	order : 1;
 }