span a order html

Question

Witam, posiadam zrobioną listę za pośrednictwem <span>..</span>, istnieje możliwość zmiany kolejności ich wyświetlania np poprzez order?, zrobiłem to tak jak poniżej ale niestety nic się nie dzieje, może ktoś zna inny sposób?

zależy mi aby to właśnie było <span> a nie <li>

<tbody>
  <tr>
  <td>
  <span>
  <strong>PRODUCENT</strong> OSOME STUDIOS
  </span><br>
  <span>
  <strong>WYDAWCA</strong> MICROIDS
  </span><br>
  <span>
  <strong>DATA PREMIERY</strong> - 29/11/2019
  </span><br>
  <span>
  <strong>WERSJA JĘZYKOWA OKŁADKI</strong> ANGIELSKA
  </span><br>
  <span>
  <strong>WERSJA JĘZYKOWA GRY</strong> - POLSKA (NAPISY)
  </span><br>
  <span>
  <strong>GATUNEK </strong>- ZRĘCZNOŚCIOWA
  </span><br>
  <span>
  <strong>STAN GRY</strong> - NOWA
  </span><br>
  <span>
  <strong>PLATFORMA</strong> - XBOX ONE
  </span><br>
  <span>
  <strong>TRYB GRY/LICZBA GRACZY - </strong>OFFLINE - 1
  </span><br>
  <span>
  <strong>KATEGORIA WIEKOWA</strong> - 7
  </span><br>
  </td>
  </tr>
</tbody>

tbody tr td{
	display: flex;
	flex-direction: column;
}

tbody tr td span:first-child {
  order: 1;
}
tbody tr td span:nth-child(2) {
  order: 2;
}
tbody tr td span:nth-child(3) {
  order: 3;
}
tbody tr td span:nth-child(4) {
  order: 8;
}
tbody tr td span:nth-child(5) {
  order: 6;
}
tbody tr td span:nth-child(6) {
  order: 4;
}
tbody tr td span:nth-child(7) {
  order: 5;
}
tbody tr td span:nth-child(8) {
  order: 7;
}
tbody tr td span:nth-child(9) {
  order: 9;
}
tbody tr td span:nth-child(10) {
  order: 10;
}

 

Answer 1

zależy mi aby to właśnie było <span> a nie <li>

Więc powiedzmy sobie wprost: nie zrobiłeś listy. To, co masz obecnie, to tabela, w której znajduje się coś, co imituje listę klucz–wartość.

Co do problemu: wydaje się działać → https://jsfiddle.net/Comandeer/2z6c05b8/ – z tym, że używałbym raczej :nth-of-type, ponieważ wśród dzieci jest jeszcze br.