Keep elements order which are in a row on smaller screens

Question

This may be really trivial question but I can't get my head around it. I created a container fluid which has rows inside, pretty basic stuff, but I'd like it not to stack in the mobile version and keep it still in the panel.

It stays in the panel in mobile version, but the result is horrifying. I'm displaying two rows on top of each other, where one holds information about player points, ratio, score etc and the lower one has the values. BUT, when stacked they make no sense at all.

I'm creating all my elements dynamically with javascript , but this shouldn't be important, the problem is I don't know which class to change at this point.

//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;
}

Where

.inf {
    font-weight: bold;
}

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

.mid{
    text-align: center;
}

.rait{
    text-align: right;
}

This is how it looks like in desktop:

Now as I mentioned earlier, the positions in rows are completely messed up in mobile version (P runs into KOHT and so on..). I can't provide the picture, but I tested in my Huawei G6 and did not like the result.

The result I'd like would be that the elements are positioned in the way they are positioned in the image above.

Answer 1

Using a table would acomplish the same results and work well on different screen sizes

http://jsfiddle.net/ugnjebse/

<div class='container'>
    <div class='row'>
        <div class='col-sm-12'>
            <div class='panel panel-default'>
                <div class='panel-heading'> <span class='panel-header'>Title</span>

                </div>
                <div class='panel-body'>
                    <table class='table'>
                        <thead>
                            <tr>
                                <th>KOHT</th>
                                <th></th>
                                <th>K</th>
                                <th>S</th>
                                <th>T</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Kevin</td>
                                <td>0</td>
                                <td>0:0</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>James</td>
                                <td>0</td>
                                <td>0:0</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Steve</td>
                                <td>0</td>
                                <td>0:0</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Foo</td>
                                <td>0</td>
                                <td>0:0</td>
                                <td>0</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>