Javascript 在较小的屏幕上保持元素的顺序

这可能是一个非常琐碎的问题，但我无法理解它。我创建了一个容器流体，里面有行，非常基本的东西，但我不希望它堆叠在移动版本中，并保持在面板中

在手机版中，它仍然在面板上，但结果是可怕的。我将两行显示在彼此的顶部，其中一行保存有关玩家分数、比率、分数等的信息，下一行包含值。但是，当它们堆叠起来时，就毫无意义了

我正在用javascript动态创建我的所有元素，但这并不重要，问题是我不知道此时要更改哪个类

//Creates the row
function createRow(pos,name,coef,ratio,points){
    //This is the horizontal row
    var upper_row = document.createElement("div");
    upper_row.className = "row";
    //These are the horizontally positioned elements
    var koht = document.createElement("div");
    koht.className = "col-xs-1 suurem";
    koht.textContent = pos;
    var tyhi = document.createElement("div");
    tyhi.className = "col-xs-7 suurem";
    tyhi.textContent = name;
    var koef = document.createElement("div");
    koef.className = "col-xs-1 suurem rait";
    koef.textContent = coef;
    var suhe = document.createElement("div");
    suhe.className = "col-xs-2 suurem mid";
    suhe.textContent = ratio;
    var point = document.createElement("div");
    point.className = "col-xs-1 suurem rait";
    point.textContent = points;
    //Adds elements to row children
    upper_row.appendChild(koht);
    upper_row.appendChild(tyhi);
    upper_row.appendChild(koef);
    upper_row.appendChild(suhe);
    upper_row.appendChild(point);
    return upper_row;
}

在哪里

这是桌面中的外观：

正如我前面提到的，在移动版本中，行中的位置完全混乱（p运行到KOHT等等）。我不能提供图片，但我在我的华为G6上测试过，不喜欢结果

---

我希望得到的结果是，元素的定位方式与上面图像中的定位方式相同。

使用表格将获得相同的结果，并在不同的屏幕尺寸上工作良好

标题
科特
K
s
T
1.
凯文
0
0:0
0
2.
詹姆斯
0
0:0
0
3.
史蒂夫
0
0:0
0
4.
福
0
0:0
0

也许您可以尝试显示：inline flexI将在此处使用表格。如果它有表格数据（确实如此）…使用表格没有坏处。事实上，它是首选。改成表格后，元素就可以了，谢谢你的想法：）

.inf {
    font-weight: bold;
}

.suurem{
    font-size: 18px;
}
.vasak{
    text-align: left;
}

.mid{
    text-align: center;
}

.rait{
    text-align: right;
}