Hide borders on extra-small devices with Bootstrap

Question

I have this code:

 <div class="container my-container">
  <div class="row">
    <div class="col-md-4"><div class="c-sin"><h1><span class="glyphicon glyphicon-heart"></span></h1>"TEXT"</div></div>
    <div class="col-md-4"><div class="c-cen"><h1><span class="glyphicon glyphicon-user"></span></h1>"TEXT"</div></div>
    <div class="col-md-4"><div class="c-des"><h1><span class="glyphicon glyphicon-inbox"></spa n></h1>"TEXT"</div></div>
  </div>
 </div> 

The problem it's the borders on a PC are visible like this:

but on a xsmall device are visible like this:

So I've decided to hide them on xsmall device, but I don't know how to do it.
Here are also the CSS I've used to create the borders:

.c-sin {
    border-right: 1px solid #DADADA;
    padding-right: 10%;
}

.c-cen {
    border-right: 1px solid #DADADA;
    padding-right: 10%;
}

Answer 1

I created a new classes using SASS:

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    .border-#{$breakpoint}-left-none {
        border-left:none !important;
    }
    .border-#{$breakpoint}-right-none {
        border-right:none !important;
    }
    .border-#{$breakpoint}-top-none {
        border-top:none !important;
    }
    .border-#{$breakpoint}-bottom-none {
        border-bottom:none !important;
    }
  }
}

Now, you can set a class like "border-xs-right" to your div and the right border will disappear for extra-small screens. "border-sm-right" would make the right border disappear for small and xs screens.

Of course, you would have to use SASS to do this. If that's not something you want to do, the compiled code looks like this:

@media (max-width: 575.98px) {
  .border-xs-left-none {
    border-left: none !important; }
  .border-xs-right-none {
    border-right: none !important; }
  .border-xs-top-none {
    border-top: none !important; }
  .border-xs-bottom-none {
    border-bottom: none !important; } }

@media (max-width: 767.98px) {
  .border-sm-left-none {
    border-left: none !important; }
  .border-sm-right-none {
    border-right: none !important; }
  .border-sm-top-none {
    border-top: none !important; }
  .border-sm-bottom-none {
    border-bottom: none !important; } }

@media (max-width: 991.98px) {
  .border-md-left-none {
    border-left: none !important; }
  .border-md-right-none {
    border-right: none !important; }
  .border-md-top-none {
    border-top: none !important; }
  .border-md-bottom-none {
    border-bottom: none !important; } }

@media (max-width: 1199.98px) {
  .border-lg-left-none {
    border-left: none !important; }
  .border-lg-right-none {
    border-right: none !important; }
  .border-lg-top-none {
    border-top: none !important; }
  .border-lg-bottom-none {
    border-bottom: none !important; } }

.border-xl-left-none {
  border-left: none !important; }

.border-xl-right-none {
  border-right: none !important; }

.border-xl-top-none {
  border-top: none !important; }

.border-xl-bottom-none {
  border-bottom: none !important; }