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 divs按顺序出现在彼此之下，我不知何故需要改变移动设计的顺序，这是可以实现的吗？

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的课程。

根据分辨率重新排列引导程序标记

1 个答案: