CSS to hide child component on mobile screen

Question

My list of messages updates the chat window fine. But on mobile I want my list of messages to hide until user clicks back.

This causes an issue because if the user is on desktop, the infinite scroll messages list will rerender causing their list to be refreshed (shrunk to original).

Currently trying to use css to hid the "left" div.

 section.inbox .hide-mobile .left {
    display: inline-block !important;
    visibility: visible !important;
  }