вопрос по Bootstrap. При замене вложенных элементов ломается структура...

В элементы с классом col я вложил span. Отобразилось нормально во всю ширину страницы четыре элемента. Потом начал менять span на div начиная с последнего элемента. Было всё нормально, пока не заменил span на div в первом элементе. После этого все элементы стали друг над другом. В чем причина?
<div class="container">
<div class="row">
<div class="col-2">
<div>test<div>
</div>

<div class="col-2">
<div>test</div>
</div>

<div class="col-4 offset-2"><div>
49 176 814 38 203</div>
</div>

<div class="col-2"><div>
button</div>
</div>
</div>