Hide border when viewing on mobile

Question

Hi all I want to know if the following is possible. I am using bootstrap frame work to build a simple webpage. In the CSS I have borders on certain div elements showing as gray however when I view from the mobile a few of these divs are hidden and the border property looks very out of place. I would like to know if there is a way to target CSS elements with bootstrap so if a page is re sized to mobile the border color changes to black or doesn't show at all.

Here is a sample of my code. HTML

<div class="container">
    <!--Strt of row-->
    <div class="row">
    <!--leftdiv1-->
     <div class="col-sm-6" id="left1">
        <h3 class="text-center" id="main">XXXXXXX</h3>
        <p class="text-center">XXXX & XXXXX</p>
     </div>
  <!--rightdiv1-->
 <div class="col-sm-6 hidden-xs contacts" id="right1">
    <ul>
        <li><a id ="print" href="#"><span class="glyphicon glyphicon-print"></span> Print</a></li>
        <li><a href="https://drive.google.com/file/d/0B1NTGaJa5XdtVlpvQUttVWhmMXM/view" target ="_blank"><span class="glyphicon glyphicon-save-file"></span> Download</a></li>
        <li><a id="contact" href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
    </ul>
  </div>
</div>

CSS

#left1 {
    border-right: dashed grey 3px;
    border-bottom: dashed grey 3px;
    height: 100px;
    overflow: auto;
}

#right1 {
    border-bottom: dashed grey 3px;
    height: 100px;
    overflow: auto;
}

Answer 1

Yes, as I see you are trying to hide the col-xs so the size is <768px See Bootstrap CSS So you would add a @media in your css. This will work:

@media (max-width: 768px) {
#left1 {
    border-right: 0px;
    border-bottom: 0px;
}
#right1 {
    border-bottom: 0px;
}
}

Answer 2

You can put an extra class on the element for example: hidden-xs . It is build in bootstrap.

http://getbootstrap.com/css/#responsive-utilities