css - bootstrap: making table readable -

i use bootstrap style table , renders small fonts on device (galaxy s5). want render normal sized fonts , text wrap if required. real use case, must use table.

https://jsfiddle.net/wcrrja2f/

for full screen: https://jsfiddle.net/wcrrja2f/embedded/result/

<div class="container-fluid">     <div class="row">         <table class="col-xs-12">             <tr>                 <td class="col-xs-5">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore</td>                 <td class="col-xs-2">12</td>                 <td class="col-xs-5">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore</td>             </tr>         </table>     </div> </div> 

that's normal size of text inside table cell.
if want increase font size on devices can use 17px (change needs):

td {     font-size: 17px; } 

or if want increase font size only on small devices can use media query target devices smaller resolution 480px:

@media screen , (max-width : 480px) {     td {         font-size: 17px;     } } 

also if don't want use additional css styles wrap text inside <h3> make bigger.