Add different version of class for mobile browsers

I was editing a Wordpress theme and I added a content box to Bootstrap's <div class="well">. I had to remove the content box's padding-bottom and margin-bottom because while on desktop there was a lot of space in the contentbox after the content box was displayed. While the removal of padding and margin works well on desktop, it overflows on mobile. The image as follows:-

On PC, it looks like this :-

Anyways, this is the content box that comes inside <div class='well'>

.site-content article {
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
padding-bottom:auto;
margin-bottom:auto;

}