(London) How to make secondary columns visible in responsive app using TableRecords?

Hi folks,

I'm using London theme for responsive design purposes. One of my screens lists #products per client (1st column shows Client Name, 2nd column show number of products). But when I see my screen on a mobile view I have to click each row in order to see the #Products (the TableRecord's 2nd column), which is now collapsed due to London Theme responsive behavior.

Question: what's the best approach to get the #Products immediately visible for the user in the mobile device? Should I use UserAgent info to show/hide information in the first column (so the user won't have to click in order to see the #products)? Or is there any other better approach to this?

I decided to go for the User Agent approach as follows:

The result is satisfactory, as seen in the mobile device (works pretty well for the desktop version, too):

Oh by the way, I also had to wipe out the expand/collapse icon through CSS, editing my local web screen stylesheet:

One thing still missing is the expand/collapse link, I can't find a way to remove it. Any ideas?
@media screen and (max-width: 764px) {
    .Responsive .TableRecords td:nth-child(2).TableRecords_OddLine,
    .Responsive .TableRecords td:nth-child(2).TableRecords_EvenLine {
        display: block;

Much cleaner. Thanks, man!
We tried to follow along the steps but we got some issue shown below:

I resized the browser window to simulate the Phone view and got this:

Looks good. But then when I resized the window halfway (Tablet view), the column headers are messed up.

Any idea is appreciated!
Are you using tables inside the TableRecord, JCElorde? Maybe the CSS selector above needs further changes for your case... please try to inspect your TableRecord's HTML and try out variations in the Style Editor.
I am basically using the default London TableRecord CSS. I'll try to check more on this.