How to split my bootstrap table in half and put one above the other?

I'm using bootstrap and I have a this kind of table:

| Label 1 | Value 1 | Label 2 | Value 2 | 
| Label 3 | Value 3 | Label 4 | Value 4 | 
| Label 5 | Value 5 | Label 6 | Value 6 | 
| Label 7 | Value 7 | Label 8 | Value 8 |

But on low resolution (i. e. mobile) I'd like to see something like that:

| Label 1 | Value 1 | 
| Label 3 | Value 3 | 
| Label 5 | Value 5 | 
| Label 7 | Value 7 | 
| Label 2 | Value 2 | 
| Label 4 | Value 4 | 
| Label 6 | Value 6 | 
| Label 8 | Value 8 |

Or like even better, like that:

| Label 1 | Value 1 | 
| Label 2 | Value 2 | 
| Label 3 | Value 3 | 
| Label 4 | Value 4 | 
| Label 5 | Value 5 | 
| Label 6 | Value 6 | 
| Label 7 | Value 7 | 
| Label 8 | Value 8 |

I know how @media queries work but I have know idea how to make this "split".

Could you help me?

Solution

If you would like to use <div> elements bootstrap's col and row classes should be able to help.

<div class="row">
    <div class="col-sm-6>
        <div class="row">
            <div class="col-sm-6>
                Label1
            </div>
            <div class="col-sm-6>
                Value1
            </div>
        </div>
    </div>
    <div class="col-sm-6>
        <div class="row">
            <div class="col-sm-6>
                Label2
            </div>
            <div class="col-sm-6>
                Value2
            </div>
        </div>
    </div>
</div>

Its not a very pretty option but it will wrap like the second 'prefered' option you want. The outermost row is one row in the table. The first option can be achieved with 2 tables each inside their own bootstrap columns.