html - Make responsive bootstrap table horizontal -

i have bootstrap table like

 <table class="table-responsive" >     <th> points </th>                                                <th> players </th>                                    <th> prizes </th>      <tr>       <td>{{ points }}</td>                     <td>{{ players }}</td>                     <td>{{ prizes }}</td>                                 </tr>   </table> 

and table looks

the problem looks , in small screens. how can make horizontal in small screens, following image ?

the desired structure of table on small screen not achieved using original table structure different. hack of displaying alternate table on smaller screens , hiding original table on smaller screen , vice versa functional.

html

<table id="big-screen">     <tr>         <th>points</th>                                                    <th>players</th>                                        <th>prizes</th>     </tr>     <tr>         <td>{{ points }}</td>                       <td>{{ players }}</td>                       <td>{{ prizes }}</td>                                 </tr> </table> <table id="small-screen">     <tr><th>points</th></tr>     <tr><td>{{ points }}</td></tr>                                    <tr><th>players</th></tr>     <tr><td>{{ players }}</td></tr>     <tr><th>prizes</th></tr>     <tr><td>{{ prizes }}</td></tr> </table> 

css

@media screen , (max-width: 319px) {   #small-screen {     display: table;   }   #big-screen {     display: none;   } }  @media screen , (min-width: 320px) {   #small-screen {     display: none;   }   #big-screen {     display: table;   } } 

here jsfiddle