#3 portrait landscape dance

chooze.css

@@ -3,26 +3,47 @@
 :any-link:hover { text-decoration-style: double }
 
 * { box-sizing: border-box }
-li { margin-block: 2ex }
+li { flex-basis: 100% }
 ol { 
   list-style-type: none;
   display: flex;
   flex-flow: row wrap;
 }
-ol > li { flex-basis: calc(100% / 3) }
-.cross > li { flex-basis: 50% }
-.cross > :nth-child(1) { order: 1 }
-.cross > :nth-child(2) { order: 3 }
-.cross > :nth-child(3) { order: 5 }
-.cross > :nth-child(4) { order: 7 }
-.cross > :nth-child(5) { order: 9 }
-.cross > :nth-child(6) { order: 11 }
-.cross > :nth-child(7) { order: 2 } 
-.cross > :nth-child(8) { order: 4 }
-.cross > :nth-child(9) { order: 6 }
-.cross > :nth-child(10) { order: 8 }
-.cross > :nth-child(11) { order: 10 }
-.cross > :nth-child(12) { order: 12 }
+
+@media (orientation: landscape) {
+  li { margin-block: 2ex }
+  ol > li {
+    flex-basis: calc(100% / 3);
+  }  
+  .cross > li { flex-basis: 50% }
+  .cross > :nth-child(1) { order: 1 }
+  .cross > :nth-child(2) { order: 3 }
+  .cross > :nth-child(3) { order: 5 }
+  .cross > :nth-child(4) { order: 7 }
+  .cross > :nth-child(5) { order: 9 }
+  .cross > :nth-child(6) { order: 11 }
+  .cross > :nth-child(7) { order: 2 } 
+  .cross > :nth-child(8) { order: 4 }
+  .cross > :nth-child(9) { order: 6 }
+  .cross > :nth-child(10) { order: 8 }
+  .cross > :nth-child(11) { order: 10 }
+  .cross > :nth-child(12) { order: 12 }
+}
+
+@media (orientation: portrait) {
+  .cross > :nth-child(1) { order: 1 }
+  .cross > :nth-child(2) { order: 12 }
+  .cross > :nth-child(3) { order: 11 }
+  .cross > :nth-child(4) { order: 10 }
+  .cross > :nth-child(5) { order: 9 }
+  .cross > :nth-child(6) { order: 8 }
+  .cross > :nth-child(7) { order: 7 } 
+  .cross > :nth-child(8) { order: 6 }
+  .cross > :nth-child(9) { order: 5 }
+  .cross > :nth-child(10) { order: 4 }
+  .cross > :nth-child(11) { order: 3 }
+  .cross > :nth-child(12) { order: 2 }
+}
 
 p {
   max-width: 30em;