sarafiでのflex box表示

###前提・実現したいこと
bootstrapを使って、サイト作成にチャレンジしています。
下記のソースのように、高さの違う画像を用いてイメージギャラリーの様なものを作りたいのですが、画像の開始位置を均一にしようと、
https://beginningzero.blogspot.jp/2017/03/bootstrap_13.html
こちらのページを参考にｃｓｓを追記したのですが、firefoxとsafariでは表示が異なります。
いろいろ調べたのですが、どうしてスペースが空くのかがわかりません。

また、解決法等ございましたら、ご教示くださいますでしょうか。

###発生している問題・エラーメッセージ

safariだと、１行目の右端の画像がズレ落ちる（親boxに幅指定はしていない）

###該当のソースコード

<html lang="jp">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <style>
	section{padding:200px 0;}
	img{width:90%;}
	.mb{margin-bottom:30px;}
	
	 .row-eq-height {
	  display: -webkit-flex; /* Safari */
	  display: flex;
	  flex-wrap: wrap;
	}
	</style>
</head>
<body>
    
    <section>
        <div class="container">
            <div class="row row-eq-height">


               <div class="col-sm-3 col-xs-6 mb">
                <p style="background:#eee; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
               </div>
                
               <div class="col-sm-3 col-xs-6 mb">
                <p style="background:#f00; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
                ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
               </div>
               
               <div class="col-sm-3 col-xs-6 mb">
                <p style="background:#FF6; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
                ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
               </div>

               <div class="col-sm-3 col-xs-6 mb">
                <p style="background:#3F3; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
                ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
                ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
               </div>
                
               <div class="col-sm-3 col-xs-6 mb">
                <p style="background:#eee; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
                ダミーテキスト</p>
               </div>
               
               <div class="col-sm-3 col-xs-6 mb">
                <p style="background:#3F3; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
               </div>

               <div class="col-sm-3 col-xs-6 mb">
                <p style="background:#f00; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
                ダミーテキストダミーテキスト</p>
               </div>
               
               <div class="col-sm-3 col-xs-6 mb">
                <p style="background:#eee; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
               </div>


            </div>
        </div>
    </section>
        
</body>
</html>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
bootstrap3を使っています