引导程序。如何只为手机屏幕添加下边距？

我有这个 HTML 代码

<div class="row">
            <div class="col-xs-12">
                <div class="titulo">
                    <h2 class="title-section font-switch">Algunos tecnologias que manejamos</h2>
                    <span>Si no vez el que necesitas pregunta, a veces no ponemos todos</span>
                </div>


            </div>
            <div class="col-xs-12 col-sm-8 col-sm-offset-2">
                <div class="row center">
                    <div class="col-xs-10 col-xs-offset-1 col-sm-3 col-sm-offset-0  vcenter">

                        <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fa fa-search-plus fa-3x"></i>
                                </div>
                            </div>
                            <img src="img/csharp.png" class="img-responsive" alt="">
                        </a>
                    </div>
                    <div class="col-xs-10 col-xs-offset-1 col-sm-3 col-sm-offset-0  vcenter">


                        <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fa fa-search-plus fa-3x"></i>
                                </div>
                            </div>
                            <img src="img/java.jpg" class="img-responsive" alt="">
                        </a>
                    </div>

                    <div class="col-xs-10 col-xs-offset-1 col-sm-3  col-sm-offset-0  vcenter">

                        <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fa fa-search-plus fa-3x"></i>
                                </div>
                            </div>
                            <img src="img/cmasmas.png" class="img-responsive" alt="">
                        </a>

                    </div>

                    <div class="col-xs-10 col-xs-offset-1 col-sm-3  col-sm-offset-0  vcenter">

                        <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fa fa-search-plus fa-3x"></i>
                                </div>
                            </div>
                            <img src="img/androidstudio.png" class="img-responsive" alt="">
                        </a>



                    </div>



                </div>
            </div>


        </div>

显示如下：

但是当屏幕尺寸更改为移动屏幕时，视图是这样的：

a margin is needed (top or bottom or both)

我知道我可以使用媒体查询添加它，但我相信如果我使用引导程序，我必须使用不太可能的媒体查询。

如何只为移动屏幕添加边距？

如果您使用的是 Bootstrap 4，则可以使用间距实用程序来完成此操作：

 <div class="mb-4 mb-md-0"></div>

这说：

mb-4：对所有屏幕（xs 及以上）使用底部边距大小 4

mb-md-0：对于中型 (md) 屏幕及以上屏幕，使用底部边距大小 0