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

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#

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;
  }
}

A plain Bootstrap4, no extra CSS, hacks or mixin solution would be something like:

<div class="row">
    <div class="col-md-3 mb-3 mb-md-0">
    ....
    </div>
    <div class="col-md-9 mb-3 mb-md-0">
    ....
    </div>
</div>

This adds a margin-bottom (mb-3) but sets it to zero when not stacked (mb-md-0).

Since media queries for spacing utils like "mb-3" apply to "everything over" (min-width) you need to do the oppsite and reset it to 0 (mb-XX-0) when not stacked. In this case we set it to stack under "md" (sm) so we set margin 0 at that breakpoint.

Here´s a fork of your jsfiddle udated to include margin only on mobile. The "mb-3 mb-md-0" styles on columns show the proposed solution. (Jsfiddle version here: http://jsfiddle.net/cb9oc064/10/)

@import url('https://getbootstrap.com/dist/css/bootstrap.css');

<div class="container">
    <div class="well well-lg" style="margin:10px">
    <div class="row">
        <div class="col-sm-6 mb-3 mb-md-0">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form>   
            <div class="form-group"> 
                <input type="textbox" class="form-control " placeholder="Username"></input>
                </div>    
                <div class="form-group"> 
                <input type="password" class="form-control " placeholder="Password"></input>   
                </div>
            </form>
        </div>
        <div class="col-sm-6 mb-3 mb-md-0">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form role="form">
                <div class="form-group">  
                    <button class="form-control btn btn-default">Push me</button>
                <input type="textbox" class="form-control" placeholder="Username"></input>
                </div>
                <div class="form-group mb-3 ">
                <input type="password" class="form-control" placeholder="Password"></input>            
                </div>
            </form>
        </div>
    </div>
    </div>
</div>