Перестановка самозагрузка разметки в зависимости от разрешения

Question

На данный момент у меня есть какая подобные самозагрузки разметка, как это:

<div class="row clerfix"> 
    <div class="span4>Search</div> 
    <div class="span4>Logo</div> 
    <div class="span4>Navigation</div> 
</div> 

Это нормально для любого разрешения, кроме мобильного, потому что мне нужно что-то вроде этого для мобильного макета (изменение порядка):

<div class="row clerfix"> 
    <div class="span4>Logo</div> 
    <div class="span4>Navigation</div> 
    <div class="span4>Search</div> 
</div> 

Поскольку span4 дивы появляются друг под другом в порядке, я как-то нужно изменить этот порядок для мобильного дизайна, является то, что достижимо?

Answer 1

Включите оба в свой html.

<div class="row clerfix hidden-phone"> 
    <div class="span4>Search</div> 
    <div class="span4>Logo</div> 
    <div class="span4>Navigation</div> 
</div> 

<div class="row clerfix visible-phone"> 
    <div class="span4>Logo</div> 
    <div class="span4>Navigation</div> 
    <div class="span4>Search</div> 
</div> 

Тогда показать и скрыть либо css media queries или JavaScript.

Благодаря редактированием от @Johan visible-phone и hidden-phone уже available in bootstrap классы.