css - 根据分辨率重新排列引导标记

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 div 按顺序出现在彼此下方，所以我需要以某种方式更改移动设计的顺序，这可以实现吗？

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 媒体查询或 javascript 显示和隐藏。

感谢@Johan 的编辑，visible-phone并且hidden-phone这些类已经在 bootstrap 中可用。