Mozilla Firefox shows different positions of pictures - html

Question

I am building a website using Twitter Bootstrap. I have divided the page content into 4 parts - 1. is a headline (col-sm-4), 2.,3.,4 are pictures (col sm-2, col-sm-2, col-sm-4). I have made a CSS class to pull pictures down. I want them to be in one row next to the H3 headline Obrazky:. Every browser shows it exactly as I want except for Mozzila which puts those three images next to the whole webpage. I need to fix that.
HTML
<div class="col-sm-4">
<br>
<h3>Obrázky:</h3>
</div>
<div class="col-sm-2 pull-down">
<br><br>
<img src="img/mobil.png" alt="mobil" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na mobilu</strong></p>
<br>
</div>
<div class="col-sm-2 pull-down">
<img src="img/tablet.png" alt="tablet" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na tabletu</strong></p>
<br>
</div>
<div class="col-sm-4 pull-down">
<img src="img/notebook.png" alt="notebook" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na notebooku</strong></p>
<br>
</div>
CSS
.pull-down {
float: none;
display: table-cell;
vertical-align: bottom;
}

Answer 1

Try this:
<div class="container">
<div class="row">
<div class="col-sm-4">
<br>
<h3>Obrázky:</h3>
</div>
<div class="col-sm-2 pull-down">
<br><br>
<img src="img/mobil.png" alt="mobil" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na mobilu</strong></p>
<br>
</div>
<div class="col-sm-2 pull-down">
<img src="img/tablet.png" alt="tablet" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na tabletu</strong></p>
<br>
</div>
<div class="col-sm-4 pull-down">
<img src="img/notebook.png" alt="notebook" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na notebooku</strong></p>
<br>
</div>
</div>
</div>