Vertical space when stacking columns in Bootstrap 3

Question

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> 

Answer 1

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