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

Question

目前我有一些类似的 Bootstrap 标记:

<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 media queries 显示和隐藏或 javascript。

感谢@Johan 的编辑 visible-phone和 hidden-phone已经上课了available in bootstrap .