ブートストラップの小さな画面に行くときに行をいくつかの行に分割するにはどうすればよいですか？

Question

I次のコードを持っている：我々は大画面を持っている場合

<div class="row second-row"> 
     <div class="col-md-3 col-sm-12 col-xs-12"> 
     <img class="img-responsive" src="http://placehold.it/200x150"> 
     </div> 
     <div class="col-md-3 col-sm-12 col-xs-12"> 
     <img class="img-responsive" src="http://placehold.it/200x150"> 
     </div> 
     <div class="col-md-3 col-sm-12 col-xs-12"> 
     <img class="img-responsive" src="http://placehold.it/200x150"> 
     </div> 
     <div class="col-md-3 col-sm-12 col-xs-12"> 
     <img class="img-responsive" src="http://placehold.it/200x150"> 
     </div> 
    </div> 

は、アル画像が同じ行に並べて表示し、そして私は小さな画面に行くとき、彼らは他の上に1スタックを。 各画像間でブレークをかけるにはどうすればよいですか？私は、それぞれのイメージが異なる行にあるような空白を持つ必要があります。
<br>を追加しようとしましたが、これはxsまたはsmでしか表示されませんでしたが、うまく機能しませんでした。これは簡単な方法で可能ですか、メディアクエリにパディングを追加する必要がありますか？

Answer 1

これを試して、動作するか確認してください。

<div class="row second-row"> 
    <div class="col-md-3 col-sm-12 col-xs-12"> 
    <img class="img-responsive" src="http://placehold.it/200x150"> 
    </div> 
    <div class="col-xs-1 visible-xs"> 
    <br/> 
    </div> 
    <div class="col-md-3 col-sm-12 col-xs-12"> 
    <img class="img-responsive" src="http://placehold.it/200x150"> 
    </div> 
    <div class="col-xs-1 visible-xs"> 
    <br/> 
    </div> 
    <div class="col-md-3 col-sm-12 col-xs-12"> 
    <img class="img-responsive" src="http://placehold.it/200x150"> 
    </div> 
    <div class="col-xs-1 visible-xs"> 
    <br/> 
    </div> 
    <div class="col-md-3 col-sm-12 col-xs-12"> 
    <img class="img-responsive" src="http://placehold.it/200x150"> 
    </div> 
</div> 

Answer 2

@media only screen and (max-width : 768px) { 
    .col-class-here { 
     margin-top: 15px; 
    } 
} 

なぜこれをやってに問題があるでしょうか？あなたが何を提案したかこれは簡単な方法です。