fix rankings html

tournaments/static/tournaments/css/style.css

@@ -569,6 +569,15 @@ svg {
     padding: 5px 0px;
 }
 
+.table-row-3-colums-teams {
+    display: grid;
+    grid-template-columns: 1px auto 100px 100px;
+    /* first column is a hack */
+    align-items: center;
+    /* Vertically center the content within each column */
+    padding: 5px 0px;
+}
+
 @media print,
 screen and (min-width: 80em) {
     .table-row-4-colums {

tournaments/templates/tournaments/ranking_row.html

@@ -1,6 +1,6 @@
 {% load static %}
 
-        <div class="table-row-3-colums bottom-border">
+        <div class="table-row-3-colums-teams bottom-border">
 
             <div class="table-cell table-cell-large semibold">
                 {% for name in ranking.names %}
@@ -8,6 +8,6 @@
                 {% endfor %}
             </div>
 
-            <div class="table-cell"><div class="mybox center">{{ ranking.ranking_display }}</div></div>
             <div class="table-cell center">{{ ranking.points_earned_display }}</div>
+            <div class="table-cell"><div class="mybox center">{{ ranking.ranking_display }}</div></div>
         </div>

tournaments/templates/tournaments/team_row.html

@@ -1,6 +1,6 @@
 {% load static %}
 
-        <div class="table-row-4-colums bottom-border">
+        <div class="table-row-3-colums-teams bottom-border">
 
             <div class="table-cell table-cell-large semibold">
                 {% for name in team.names %}
@@ -8,6 +8,6 @@
                 {% endfor %}
             </div>
 
-            <div class="table-cell"><div class="mybox center">{{ team.stage }}</div></div>
             <div class="table-cell center">{{ team.weight }}</div>
+            <div class="table-cell"><div class="mybox center">{{ team.stage }}</div></div>
         </div>