JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<title>Modifier ordre affichage enfants dans grille P 208 F et G</title>
		<style>
			body {
				padding: 20px; /* 50px */
			}
			#conteneur {
				/* Grille de mise en page */
				display: grid;
				grid-template-columns: repeat(3,300px);
				gap: 10px;
				/* Mise en forme */
				width: 920px;
				padding: 10px;
				border: 1px solid #000;
        border-radius: 6px; 
			}
     
     
			#deux {
				order: -1;  /* -1 */
				background-color: lightblue;
			} 
			 #trois {
				order: 2;  
				background-color: lightgreen;
			}
			#six {
				order: 1;  /* 1 */
				background-color: yellow;
			} 
			p {
				margin: 0;
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<div id="conteneur">
			<p><b>Un</b>. Dans une grille, les éléments enfants s'affichent par défaut dans leur ordre de déclaration dans le code html.</p>
			<p id="deux"><b>Deux</b>. Le paragraphe id="deux" doit s'afficher en tout premier. Valeur -1.<br>
      Le deux recule de 1 colonne OK</p>
			<p id="trois"><b>Trois</b>. Le paragraphe id="trois" doit s'afficher en dernier. Valeur 2.<br>
      Je ne saisis pas l'attribution de ces valeurs ... valeur -2 il repasse en un.</p>
			<p><b>Quatre</b>. Dans un premier temps, nous devons appliquer des identifiants à ces trois paragraphes, afin de les cibler par la suite.</p>
			<p><b>Cinq</b>. Chaque paragraphe enfant s'affiche bien selon l'ordre dans lequel ils ont été déclarés dans la structure html.</p>
			<p id="six"><b>Six</b>. Le paragraphe id="six" doit s'afficher en avant-dernier. Valeur 1.</p>
			<p><b>Sept</b>. Si je déclare une requête média, c'est la pagaille totale ...</p>
			<p><b>Huit</b>. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
			<p><b>Neuf</b>. Nulla vitae elit libero, a pharetra...