Q:

Top or bottom margin between columns on smaller resolution

For a pattern like:
<div class="row">

  <div class="col-md-4">
      A
  </div>

  <div class="col-md-4">
      B
  </div>

  <div class="col-md-4">
      C
  </div>

</div>

The output on desktops is
+---+---+---+
| A | B | c |
+---+---+---+

When I resize the browser window to emulate a tab/phone, the output changes to
+---+
| A |
+---+
| B |
+---+
| C |
+---+

The expected output is
+---+
| A |
+---+
+---+
| B |
+---+
+---+
| C |
+---+

i.e., either a top or bottom margin. At the moment, I'm using a clear:both div with a height of 10px between each cols to make that happen.
<div class="row">

      <div class="col-md-4">
          A
      </div>

      <div class="clear"></div> <!-- want to avoid using this -->

      <div class="col-md-4">
          B
      </div>

      <div class="clear"></div> <!-- want to avoid using this -->

      <div class="col-md-4">
          C
      </div>

</div>

Although this does the job, I was wondering if there was a more effective way of achieving it?

A:

 <div class="row wrapper">

    <div class="col-md-4">
      Col A
    </div>

    <div class="clear"></div> <!-- want to avoid using this -->

    <div class="col-md-4">
      Col B
    </div>

    <div class="clear"></div> <!-- want to avoid using this -->

    <div class="col-md-4">
    </div>

 </div> <!-- parent container -->

CSS
     /* use a media query to apply the CSS & edit your own break point */
 @media screen and (max-width:767px){ 

  .wrapper .col-md-4{
     margin-top:20px; /* use whatever gap u need */
   }

   .wrapper > *:first-child{  /* targeting the first child to remove top margin */
       margin-top:0;
   }
  }

