Vertical space when stacking columns in Bootstrap 3

When columns are stacked in mobile mode, I would like some vertical space separating the column contents, how can I do this?

See jsfiddle in http://jsfiddle.net/tofutim/3sWEN/ and vary the width of the output. There should be some spacing before the second lorem ipsum.

<div class="container">
    <div class="well well-lg" style="margin:10px">
    <div class="row">
        <div class="col-sm-6">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form>               
                <input type="textbox" class="form-control" placeholder="Username"></input>
                <input type="password" class="form-control" placeholder="Password"></input>                     
            </form>
        </div>
        <div class="col-sm-6">
            <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>
                <input type="password" class="form-control" placeholder="Password"></input>            
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

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: https://stackoverflow.com/questions/43208183/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>

Look at this example http://getbootstrap.com/examples/carousel/ When stacked There is a margin between the text and the 500*500 Image. This is because The text has <p> around it and its add margin bottom 20px

Add a negative top margin to each row, and counter that margin on each column, like this:

.row {
  margin-top: -10px;
}
[class^='col'], [class*=' col'] {
  margin-top: 10px;
}

After columns start stacking they get the vertical margin between them.

Works on all screen sizes.

Try using span instead of div with bootstrap classes.