title: Applying borders on elements depending on device size with bootstrap
body: <p>I'm using bootstrap to create a mobile first responsive layout and have various rows and columns set up that I adjust for the different categories of screen size.</p>
  
  <p>I am wondering if there are pure bootstrap styling classes that would allow me to apply and remove borders for the different sizes, without having to create my own css media queries.</p>
  
  <p>For example, if I wanted to have a border-right on the first column in a row only when it's floated at medium size... I know this is not real code, but is there something to the same affect that I'm too dumb to find?</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-12 col-md-6 border border-top-0 border-right-0 border-bottom-0 border-left-0 border-md-right-1"&gt;
          &lt;p&gt;Lorem ipsum&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-12 col-md-6"&gt;
          &lt;p&gt;Dolor sit amet&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm also using the maxcdn css so can't get into the sass. Any suggestions?</p>