Bootstrap: Gap between columns on mobile display

Question

I am doing a website using bootstrap 3.0 which I want the HTML and CSS to be seen neatly on a desktop, tablet and mobile.

A problem that I am having is that when you view the site on a mobile display the column are stacked (in which I am not criticizing as this stops scrolling as much as possible). However, I would like a little gap between the columns (even 1-2px).

The code so far

<div class="row">
    <div class="col-xs-12 col-sm-8 col-md-8">
        <div class="Columns">
        ..content 
        </div>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-4">
        <div class="Columns">
        ..content
        </div>
    </div>
</div>

An image to show what this is doing and to display the stack columns

How could I achieve a little gap between the columns?

Thanks

Answer 1

Add a custom class .column-margin to set the margin between the rows/columns.

@media (max-width: 991px) {
  .column-margin {
    margin: 2px 0;
  }
}

<div class="row">
  <div class="col-xs-12 col-sm-8 col-md-8">
    <div class="Columns column-margin">
      <img src="http://placehold.it/300x300" />
    </div>
  </div>
  <div class="col-xs-12 col-sm-8 col-md-4">
    <div class="Columns">
      <img src="http://placehold.it/300x300" />
    </div>
  </div>
</div>

Codeply