Rearranging the order of cells in a table for mobile - html

Question

I am trying to change the order of the cells I have in a table on #mobile screen, but haven't had any luck.
My table on Mac width is a grid with different cell sizes, colors, font sizes etc., but on Mobile I want it to be a simple list separated by horizontal lines, with a link for each item. I managed to do this, but I'd also like to change the order in which the list appears.
Tried to add divs and order it that way but it didn't work. Any advice would be most welcome!
Here's my HTML and mobile CSS:
#mobile screen CSS
.situations {
table.situ {
margin-left: 0%;
}
tr {
display: block;
color: #161616 !important;
line-height: 1 !important;
border: none;
}
#frame {
height: 100px;
width: 100%;
}
td {
/* Behave like a "row" */
display: block;
background-color: #ffffff;
border: none;
border-bottom: 0.5px solid #161616;
position: relative;
padding-left: 2%;
text-align: center;
height: 60px;
width: $fullWidth;
font-size: 14px !important;
color: #161616 !important;
padding-top: 8%;
padding-bottom: 8%;
line-height: 1 !important;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
color: #161616 !important;
line-height: 1 !important;
border: none;
}
}
<section class="situations responsiveWidth center cinch2">
<div class="table"><table class="situ" id="frame" border="0" cellspacing="0" cellpadding="0">
<tr>
<div id="situ4"><td class="product1" height="33.333%" rowspan="2"><a class="label black" href="product1.html">Text</a></td></div>
<div id="situ6"><td class="product2" height="16.666%"><a class="label black" href="product2.html">Text</a></td></div>
<div id="situ3"><td class="product3" height="50%" rowspan="3"><a class="label black" href="product3.html">Text</a></td></div>
</tr>
<tr>
<div id="situ5"><td class="product4" height="16.666%"><a class="label black" href="product4.html">Text</a></td></div>
</tr>
<tr>
<div id="situ2"><td class="product5" height="33.333%" colspan="2" rowspan="2"><a class="label black big" href="product5.html">Text</a></td></div>
</tr>
<tr>
<div id="situ7"><td class="product6" height="16.666%"><a class="label black" href="product6.html">Text</a></td></div>
</tr>
<tr>
<div id="situ8"><td class="product7" height="16.666%"><a class="label black startout" href="product7.html" id="situ8">Text</a></td></div>
<div id="situ1"><td class="product8" height="33.333%" colspan="2" rowspan="2"><a class="label white big" href="product8.html">Text</a></td></div>
</tr>
<tr>
<div id="situ9"><td class="product9" height="16.66666%"><a class="label black" href="product9.html" id="situ9">Text</a></td></div>
</tr>
</table></div>
<br>
</section>

Answer 1

You could consider using divs instead of a table and have a flexbox for the rows. It's than easy to change the order of the columns.
.table {
display: table;
width: 100%;
}
.row {
display: flex;
justify-content: space-between;
width: 100%;
border-bottom: thin solid lightgray;
}
.cell {
display: table-cell;
padding: 0.5em;
}
.title {
order: 2;
}
.name {
order: 1;
}
.zip {
order: 4;
}
.place {
order: 3;
}
<div class="table">
<div class="row">
<div class="cell title">Title</div>
<div class="cell name">Name</div>
<div class="cell zip">Zip</div>
<div class="cell place">Place</div>
</div>
<div class="row">
<div class="cell title">Title</div>
<div class="cell name">Name</div>
<div class="cell zip">Zip</div>
<div class="cell place">Place</div>
</div>
<div class="row">
<div class="cell title">Title</div>
<div class="cell name">Name</div>
<div class="cell zip">Zip</div>
<div class="cell place">Place</div>
</div>
</div>