Q:

Bootstrap Table - Column Headers change on small device

Table displayed on a large or medium view... all but small is ok:

When I resize to a small viewport, my column headings go wonky... Note the "Column1" across entire the top, but the columns are stacked 

I'm doing this with the table classes:
                <table class="table table-striped table-mobile mobile-primary">
                    <colgroup>
                        <col class="col-lg-3">
                        <col class="col-lg-2">
                        <col class="col-lg-3">
                        <col class="col-lg-3">
                        <col class="col-lg-1">
                    </colgroup>
                    <thead>
                        <tr class="bg-primary">
                            <th>Event</th>
                            <th class="text-center">Location</th>
                            <th class="text-center">Start</th>
                            <th class="text-center">End</th>
                            <th class="text-center">Register</th>
                        </tr>
                    </thead>
                    ...
                </table>

Taking out the colgroup classes does not help.
I do have it wrapped in an overflow div but that does not help.

The overflow div:
            <div style="overflow: auto;">
               table Html is in here...
            </div>

Can I make the column headers stack or disappear when the viewport is small? 

A:

I should have looked closer at the customization in bootstrap template.  My bootstrap template had a colgroup and css associated with it like so:
         <colgroup>
            <col class="col-xs-3">
            <col class="col-xs-3">
            <col class="col-xs-3">
            <col class="col-xs-3">
        </colgroup>

I just took this out and things resize nicely.  I probably could have tweaked the colgroup css, but the default table functionality worked fine for me.   

