change order of items being updated to html table

Question

I have a table list like so:

<table id="proposalCreatedEvent">
    <thead>
       <tr>
         <th scope ="col"> id </th>
         <th scope="col"> proposal </th>
         <th scope ="col"> cost </th>
         <th scope ="col"> verdict </th>
       </tr>
    </thead>
    <tbody></tbody>
</table>

Which i'm updating with js by listening to events from a smart contract:

function listenToProposals(fromBlockNumber) {
    console.log('Listening for proposals');
    DaoApp.contract.events.proposalCreated({
        //filter:{[]},
        fromBlock: (fromBlockNumber || 0),
    }, proposalListener);
  }

function proposalListener(err, contractEvent) {
    if (err) {
      console.error('Proposal listener error', err);
      return;
    }
    console.log('Heard something!');
    const {
      event,
      returnValues,
      blockNumber,
    } = contractEvent;
    const {
      id,
      proposal,
      cost,
    } = returnValues;
    console.log(id,proposal,cost,);
    const tbody = document.querySelector('#proposalCreatedEvent > tbody');
    const tr = createTableRowElement(
        '' + id,
        '' + proposal,
        '' + cost,
    );
    tbody.appendChild(tr);
  }

as it is now, the first proposal is highest on the list while the latest is the lowest.

I've tried list manipulation like reversed and flexbox without success.

How can i update the table list in reverse order using js or css?