4

我正在使用引导程序。我有一排三个街区：

<div class="row">
    <div class="span3" id="B">...</div>
    <div class="span4" id="A">...</div>
    <div class="span3" id="C">...</div>
</div>

这样三个块的顺序为B, A, C。

如果屏幕宽度较小，则三个块将各占一行，并且顺序也为B, A, C。

但我希望他们订购为

A
B
C

我怎样才能做到这一点？

4

4 回答 4

5

试试这个：

<div class="row">
    <div class="pull-left">
        <div class="span4 pull-right" style="margin-left:0px;">A</div>
        <div class="span3 pull-left" style="margin-left:0px;">B</div>
    </div>
    <div class="pull-right">
        <div class="span3">C</div>
    </div>
</div>

您可能需要稍微调整间距，但当屏幕宽度较窄时，它应该为您提供所需的正确顺序。

于 2013-04-06T06:00:43.540 回答
0

我的回答很简单，有效，不需要技巧就可以做到：

使您的 HTML 结构如下所示：

<div class="row">
    <div class="span1" id="B">...</div>
    <div class="span2" id="A">...</div>
    <div class="span3" id="B">...</div>
    <div class="span4" id="C">...</div>
</div>

现在，在您的<head>元素中包含以下内容：

<link rel='stylesheet' type='text/css' media="all and (min-width:1024px)" href='bigdevice.css' />
<link rel='stylesheet' type='text/css' media="all and (max-width:1024px)" href='smalldevice.css'>

在你的smalldevice.css

.span1 {display:none;}

在你的bigdevice.css

.span3 {display:none;}
于 2013-04-06T04:12:55.663 回答
0

试试这个，它是一个简单的例子。希望它可以帮助你。

  @media screen and (min-width: 320px)  and (max-width: 480px){
    #row{position: relative;color:#fff;}
   #B{background:#000;width:100%;height:50px;float:left;position: absolute;top:50px;}
  #A{background:#666;width:100%;height:50px;clear:both;position: absolute;top:0;}
  #C{background:#aaa;width:100%;height:50px;float:left;position: absolute;top:100px;}
  }

对于大屏幕，您不必隐藏任何元素。只是尝试绝对定位它。

@media screen and (min-width:481px) {
    #row{position: relative;}
  #B{background:#000;width:100%;height:50px;}
  #A{background:#666;width:100%;height:50px;}
  #C{background:#aaa;width:100%;height:50px;}
  }
于 2013-04-06T19:38:28.413 回答
-1

另一种方法是使用这个：

<html>
<head>
<style type="text/css">
@media all and (min-width: 1024px) {
.span3 {display:none;}
}
@media all and (max-width: 1024px) {
.span1 {display:none;}
}
</style>
</head>
<body>
<div class="row">
    <div class="span1" id="B">...</div>
    <div class="span2" id="A">...</div>
    <div class="span3" id="B">...</div>
    <div class="span4" id="C">...</div>
</div>
</body>
</html>
于 2013-04-06T04:22:13.550 回答