I agree that you should avoid !important if you can.

The !important is needed because it has to override the behaviour set bij Bootstrap itself (in Isis Bootstrap css is copied into template.css). Bootstrap itself uses the following css
 .visible-desktop {
   display: inherit !important;
 }
This will break the design when you apply .visible-desktop to a table-cell.
According to the css it will inherit the display behaviour set to the html tag above... in this case in the tr tag
In the display is set to table-row, where table-cell is needed. 

This is a known issue in Bootstrap itself. 
https://github.com/twitter/bootstrap/issues/5206
Bootstrap closed the issue since they don't support the responsive utilities on table cells.
The suggested code in the comment of that issue solved the issue. 
They used !important to be able to override the set css design from Bootstrap itself where they used !important.