create a space between div for smaller screens

i've been struggling to make space between the div in the smaller screens. i tried use padding-top, but it didn't work for me.

this is my html page

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3 col-xs-12">
            <div class="col-md-6 col-xs-12">
                <a href="" class="box">
                    <img src="" class="img-card-content center-block img-responsive" style="width: 200px"/>
                </a>
            </div>
            <div class="col-md-6 col-xs-12">
                <a href="" class="box">
                    <img src="" class="img-card-content center-block img-responsive" style="width: 200px"/>
                </a>
            </div>
        </div>
    </div>
</div>

for my css :

.box {
    padding: 40px;
    display: block;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border: 1px solid #575757;
}

the rest of css is from bootstrap.

does anyone have solution for this?


Just add following CSS for this

@media only screen and (max-width:768px) {
    .box {
        margin-bottom: 10px; /* Or required space */
        display: block;
    }
}