Twitter bootstrap 引导移动和桌面的不同视图

我正在用bootstrap创建一个网站，我使用这个逻辑在移动版和桌面版上以不同的方式显示专栏。我使用的类有.visible lg和.visible xs。在移动版和桌面版中，使列之间的边距不同并以不同的方式显示它们是否是一种好的做法

<div class="row">
     <div class="col-lg-3 col-sm-6">
        <img src="images/strelica.png">
    </div>

     <div class="col-lg-1 visible-lg"></div>
     <div class="col-xs-12 visible-xs">&nbsp;</div>

     <div class="col-lg-3 col-sm-6">
        <img src="images/strelica.png">
    </div>       

    <div class="col-lg-1 visible-lg"></div>
     <div class="col-xs-12 visible-xs">&nbsp;</div>

     <div class="col-lg-3 col-sm-6 ">
        <img src="images/strelica.png">
    </div>       

    <div class="col-lg-1 visible-lg"></div>
    <div class="col-xs-12 visible-xs">&nbsp;</div>

     <div class="col-lg-3 col-sm-6">
        <img src="images/comp.png">
    </div>
</div>

我认为使用

offset

类来分隔列更好（标记更少）。但是，空的

可见xs

是在每行之间创建空格的唯一方法

<div class="row">
    <div class="col-lg-3 col-sm-6">
        <img src="//placehold.it/800" class="img-responsive">
    </div>
    <div class="col-xs-12 visible-xs">&nbsp;</div>
     <div class="col-lg-3 col-sm-6 col-lg-offset-1">
        <img src="//placehold.it/800" class="img-responsive">
    </div>       
     <div class="col-xs-12 visible-xs">&nbsp;</div>
     <div class="col-lg-3 col-sm-6 col-lg-offset-1">
        <img src="//placehold.it/800" class="img-responsive">
    </div>       
    <div class="col-xs-12 visible-xs">&nbsp;</div>
    <div class="col-lg-3 col-sm-6">
        <img src="//placehold.it/800" class="img-responsive">
    </div>
</div>