Vertical space when stacking columns in Bootstrap 3

One way would be with CSS that adds margin-bottom to col-* on smaller devices/widths..

@media (max-width: 768px) {

  [class*="col-"] {
      margin-bottom: 15px;
  }

}

Another way is to add a div that is only visible on smaller devices/widths..

 <div class="col-sm-6">
    <div class="hidden-lg hidden-md hidden-sm">&nbsp;</div>
        ...

Demo: http://bootply.com/92276

---

Update 2019

Bootstrap 4 now has spacing utilities that can be used.

Also see: Add spacing between vertically stacked columns in Bootstrap 4

I wanted to have it working for when my columns stack at less than 991px and effect all but the first child so I put

@media (max-width: 991px) { 
  [class*="col-"]:not(:first-child){
      margin-top: 40px;
  }
}

Use .form-group on the columns

That is the bootstrap way. Other mentioned CSS hacks may work, but aren't the intended way to achieve what you want. Hacking up bootstraps CSS may lead to more work later when changing your bootstrap version.

Bootply example: http://www.bootply.com/4cXfQkTCAm#