Question

我正在使用容器。

两个跨度。

标记中的第一个范围是div.span8，第二个范围是div.span4

现在，当我使用移动设备尺寸的浏览器查看网站时，事情很简洁但是span4滑到span8的底部，这是span4 span8之后的span4标记。现在，我想以这样的方式制作：当浏览器的大小是移动的时，span8位于<div id="maincontent" style="margin:0px; padding: 0px;" class="row-fluid <?php echo $main; ?> category" role="main"> <div class="span8"> <div id="content" class="span8 mainborder"></div> </div> <div class="span4"> <?php echo $column_right; ?> </div>之前，这意味着在它之上。我该怎么做？

这是我的MarkUp：

{{1}}

CSS是TB 2.0。

提前致谢

Answer 1

你可以这样做：

<div id="maincontent" style="margin:0px; padding: 0px;" class="row-fluid <?php echo $main; ?> category" role="main">

<div class="span4 pull-right">
    <?php
     echo $column_right;
    ?>
</div>
<div class="span8 pull-left" >
    <div id="content" class="span8 mainborder"></div>
</div>

供参考，您可以访问http://getbootstrap.com/css/#helper-classes-floats

Answer 2

您可以先在html文档中添加span4，并在屏幕尺寸为＆gt;时将span8设为浮动。 768像素。

@media (min-width:768px) {
.span8 {
float:right;
}
}

关于使用Twitter Bootstrap 2.0的元素顺序的移动响应问题

2 个答案: