Bootstrap table disappearing when less than 1200 pixels - css

Question

I have a Bootstrap issue where my table disappears. When my page displays more than 1200 pixels wide my table shows perfectly. But when my page is shrunk to less than 1200 pixels wide my table disappears. I am not super advanced with bootstrap(not a design guy) so i am unsure what is causing the problem. I think it has something to do do with responsive tables. Also I have not edited my bootstrap.
<div class="row">
<div class="col-md-12">
<div class="panel panel-cascade">
<!-- heading-->
<div class="panel-heading text-primary">
<h3 class="panel-title">
Friends List
<span class="pull-right">
<i class="fa fa-chevron-up"></i>
<i class="fa fa-times"></i>
</span>
</h3>
</div>
<!-- body -->
<div class="panel-body">
<table class="table table-condensed table-hover">
<thead>
<tr>
<th class="visible-lg">First Name</th>
<th class="visible-lg">Last Name</th>
<th class="visible-lg">Phone Number</th>
<th class="visible-lg">Carrier</th>
<th class="visible-lg">Send Text</th>
</tr>
</thead>
<tbody>
#foreach (var row in Model)
{
<tr>
<td class="visible-lg">
#row.FirstName
</td>
<td class="visible-lg">
#row.LastName
</td>
<td class="visible-lg">
#row.PhoneNumber###row.Carriers[0].CarrierEmail
</td>
<td class="visible-lg">
#row.Carriers[0].CarrierName
</td>
<td class="visible-lg">
#using (Html.BeginForm("SendEmail", "Admin"))
{
#Html.Hidden("Id", row.Id)
<button type="submit" class="btn btn-success"><i class="fa fa-envelope"></i></button>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>

Answer 1

I think it is because of class you are using "visible-lg", wich means visible when large, bootstrap 3 uses 4 different sizes xs, sm, md, lg. take a read at this article http://getbootstrap.com/css/.
I use this classes in my tables and they work perfect.
<table id="proviers-table" class="table table-striped table-bordered">
<thead>
<tr>
<th>Nombre</th>
<th>Teléfono</th>
<th>Correo Electrónico</th>
<th>País</th>
<th>Entidad Federativa</th>
<th>Dirección</th>
<th></th>
</tr>
</thead>
<tr>
<td>coty</td>
<td>1234567890</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<div class="btn-group">
<button class="btn btn-default btn-xs edit-provider" id="1" >
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button class="btn btn-default btn-xs edit-provider" id="1">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
<tr>
</table>
here is my view:
when small: