Bonjour Raphaël !
Désolé , je ne sais pas pourquoi je veux t'appeler Romain
(en fait si , tu ressemble à un ami à moi qui s'appelle ainsi
).
Alors merci pour ta réponse,
j'ai copié bout de code par bout de code le css sur la page pour l' "édulcorer" un peu (parce que currieusement si je mettait tous le css de la page codepen d'un coup ça ne marchait pas ) .
Et ça marche !
Ahhhh !!! Enfin !Youpi !
Merci bien !
. Et pour ceux qui voudraient la solution clé en main :
// WARNING : don't forget to prefix Flexbox for older browsers!
// LESS part from now ...
// config breakpoints (choose unit you prefer)
@tiny-screen : 480px; // tiny screens media query (less than 480px)
@small-screen : 768px; // screens between 481px and 768px
@medium-screen : 1024px; // screens between 769px and 1024px
@large-screen : 1280px; // screens between 1025px and 1280px
@gutter: 1em;
@number: 4; // for equal columns
@left: 2; // left side of uneven columns
@right: 1; // right side of uneven columns
// grid styles for container wich has a .grid(n,g) class
// n = number of columns (default = 4)
// g = gutter value (default = 1em)
// example : .grid-container { .grid(12, 10px); }
/* grid container */
[class*="grid-"] {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -@gutter;
/* inline-block fallback for IE9 generation */
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
/* grid childs */
[class*="grid-"] > * {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: ~'calc(100% * 1 / @{number} - @{gutter} - .01px)';
margin-left: @gutter;
/* inline-block fallback for IE9 generation */
display: inline-block;
vertical-align: top;
letter-spacing: normal;
text-rendering: auto;
}
.grid(@number:@number, @gutter:@gutter) {
& > * {
width: ~'calc(1 * 1 / @{number} - @{gutter})';
}
& > .flexitem-double {
width: ~'calc(1 * 2 / @{number} - @{gutter})';
}
& > .flexitem-first {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
}
@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
& > * {
width: ~'calc(1 * 1 / 2 - @{gutter})';
}
& > .flexitem-double {
width: ~'calc(1 - @{gutter})';
}
}
@media (max-width: @tiny-screen) {
& > * {
width: ~'calc(1 - @{gutter})';
}
& > .flexitem-double {
width: ~'calc(1 - @{gutter})';
}
}
}
/* examples */
.grid-2 {
.grid(2);
}
.grid-3 {
.grid(3);
}
.grid-4 {
.grid(4);
}
.grid-5 {
.grid(5);
}
.grid-6 {
.grid(6);
}
.grid-7 {
.grid(7);
}
.grid-8 {
.grid(8);
}
.grid-10 {
.grid(10);
}
.grid-12 {
.grid(12);
}
.grid-16 {
.grid(16);
}
// grid styles for container wich has a .uneven-grid(l,r,g) class
// left = left ratio column (default = 2)
// right = right ratio column (default = 1)
// gutter (default = 1em)
// example : .grid-container { .uneven-grid(2, 1, 10px); }
.uneven-grid(@left:@left, @right:@right, @gutter:@gutter) {
& > *:nth-child(odd) {
@size: (@left / (@left + @right)) * 100%;
width: ~'calc(@{size} - @{gutter})';
}
& > *:nth-child(even) {
@size: (@right / (@left + @right)) * 100%;
width: ~'calc(@{size} - @{gutter})';
}
@media (max-width: @tiny-screen) {
& > *:nth-child(n) {
width: ~'calc(1 - @{gutter})';
}
}
}
/* examples */
.grid-2-1 {
.uneven-grid(2,1);
}
.grid-1-2 {
.uneven-grid(1,2);
}
.grid-3-1 {
.uneven-grid(3,1);
}
.grid-1-3 {
.uneven-grid(1,3);
}
.grid-3-2 {
.uneven-grid(3,2);
}
.grid-2-3 {
.uneven-grid(2,3);
}
.grid-4-1 {
.uneven-grid(4,1);
}
.grid-1-4 {
.uneven-grid(1,4);
}
/* deco */
* {
box-sizing: border-box;
}
body {
margin: 20px;
font-family: helvetica, arial, sans-serif;
font-size: 1em;
}
[class*="grid-"] > div,
[class*="simple"] > div {
margin-bottom: 20px;
padding: 1em;
border: .25em dotted goldenrod;
color: #fff;
background-color: olivedrab;
}
là ça devient vraiment trop technique 
)