CSS table row reorganisation - css

Question

I want to move the last row of a table on top and shift all other rows one down. I tried what works for divs, but unfortunatelly it wont work for table rows.
HTML I used
.tablebodyclass tr {
top: auto;
bottom: 0px;
}
.tablebodyclass tr:last-of-type {
top: 0px;
bottom: auto;
}
<table class="table">
<tbody class="tablebodyclass">
<tr class="no-stripe hidden" style="display: table-row;">
<td class="align-right" colspan="3">bla bla1</td>
</tr>
<tr class="no-stripe hidden" style="display: table-row;">
<td class="align-right" colspan="3">bla bla2</td>
</tr>
<tr class="no-stripe hidden" style="display: table-row;">
<td class="align-right" colspan="3">bla bla3</td>
</tr>
<tr class="no-stripe hidden" style="display: table-row;">
<td><strong>THIS needs to be first</strong> </td>
<td class="align-right" colspan="2">xxxxxx
</tr>
</tbody>
</table>
https://jsfiddle.net/3ow0mrvy/1/
any hint on how to reorder table rows are highly appreicated
--endo

Answer 1

You can't reorder the rows with only CSS. jQuery or flexbox could help you out there. However, to mimic this with pure CSS, you could add a margin to the top row, and then set the last row to be position: absolute to make it appear on top:
.tablebodyclass tr {
top: auto;
bottom: 0px;
}
.tablebodyclass tr:last-of-type {
top: 0px;
bottom: auto;
}
tr:last-of-type {
position: absolute;
}
tr:first-of-type {
margin-top: 14px;
}
<table class="table table-condensed table-hover table-vertical-middle table-shop table-stack-phone">
<tbody class="tablebodyclass">
<tr class="no-stripe hidden" style="display: block;">
<td class="align-right" colspan="3">bla bla1</td>
</tr>
<tr class="no-stripe hidden" style="display: block;">
<td class="align-right" colspan="3">bla bla2</td>
</tr>
<tr class="no-stripe hidden" style="display: block;">
<td class="align-right" colspan="3">bla bla3</td>
</tr>
<tr class="no-stripe hidden" style="display: block;">
<td><strong>THIS needs to be first</strong> </td>
<td class="align-right" colspan="2">xxxxxx
</tr>
</tbody>
</table>
JSFiddle

Answer 2

You can use flex and order in order to achieve what you want.
tbody tr{
display: block;
border: 1px solid red;
}
<table class="table table-condensed table-hover table-vertical-middle table-shop table-stack-phone">
<tbody class="tablebodyclass" style="display: flex; flex-direction: column;">
<tr class="no-stripe hidden" style="order: 2;">
<td class="align-right" colspan="3">bla bla1</td>
</tr>
<tr class="no-stripe hidden" style="order: 3;">
<td class="align-right" colspan="3">bla bla2</td>
</tr>
<tr class="no-stripe hidden" style="order: 4;" >
<td class="align-right" colspan="3">bla bla3</td>
</tr>
<tr class="no-stripe hidden" style="order: 1;">
<td><strong>THIS needs to be first</strong> </td>
<td class="align-right" colspan="2">xxxxxx
</tr>
</tbody>
</table>
To learn more about how flex works you can look into this [great article].(https://css-tricks.com/snippets/css/a-guide-to-flexbox/)