Question

在Bootstrap或Foundation中说，是否有可能实现这种布局？

enter image description here

你在这看到问题了吗？在平板电脑尺寸时，顶部列应位于底部。推/拉技巧在这里不适用，因为这是一个不同类型的列重新排序。

你有什么想法吗？

Answer 1

您可以使用带有弹性框的CSS中的order属性。

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#order

在此处检查浏览器兼容性http://caniuse.com/#search=order

Answer 2

使用Foundation，您可以使用size-push-units和size-pull-units类。例如：.small-push-10或.large-pull-7，用于调整那么多列的定位。请注意，您还必须在相关元素上设置相反的内容。因此，对于您的示例，如果每个框的宽度为12列，那么在绿色框中您将拥有类small-push-24（要推过的所有元素的总宽度），以及每个黄色的盒子，你都有小拉力12（元素的宽度超过它们）。

您可以在标题＆＃34;来源订购＆＃34;：http://foundation.zurb.com/docs/components/grid.html

标题下阅读相关内容。

Answer 3

这与我能够得到的一样接近：见example #1。

当我想将一些列堆叠在一起时 - 我只是给它们大小为12（参见示例＃2）并且bootstrap知道如何处理它，遗憾的是它似乎不能在嵌套中工作。祝你好运。

Answer 4

您对IE8支持的评论限制了您的一些选择，我相信：

1。）如果这些块中的内容不是动态的（意味着它具有一致的高度），您可以使用负边距伪造此排序。 http://codepen.io/ryantdecker/pen/oXGBRe

@media screen and (max-width: 600px) {
 .greenTop {margin-top:260px;}
 .yellow1 {margin-top:-360px;}
}

2.）如果由绿色区域表示的块不是特别复杂，则可以将其在页面中两次并且根据媒体查询根据需要显示/隐藏每个块。 http://codepen.io/ryantdecker/pen/BNwpEq

.greenTop {display:none;}

@media screen and (min-width: 600px) {
  .greenTop {display:block;}
  .greenBottom {display:none;}
}

（这些都需要像respond.js这样才能让IE8在媒体查询中发挥出色：http://getbootstrap.com/getting-started/#support-ie8-ie9）

Answer 5

Ronnel Castillo Ocampo ，嗨看看这个 Fiddle 我使用Bootstrap和一些媒体查询断点来做一些show and hide等。
没有推/拉也没有负边距值。只是一个简单直接的方式。
看一下，看看当你调整大小时这种方式是否适合你。

以下是 Fiddle 的大视图。

enter image description here

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.space {
  margin-top: 5%;
  margin-bottom: 5%;  
}    
.block-gray {
  margin-top: 2%;  
  height: 300px;
  background-color: darkgray;
}
.block-green-top {
  margin-top: 0%;  
  height: 100px;
  background-color: greenyellow;
}     
.block-green {
  margin-top: 2%;  
  height: 100px;
  background-color: greenyellow;
} 
.block-yellow {
  margin-top: 2%;   
  height: 100px;
  background-color: yellow;
}     
.block-right {
  margin-top: 2%; 
}
.block {
  margin-top: 2%;
  height: 400px;
}    
.borders {
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border: 2px solid #000000;
}
    
@media(max-width:1200px) {
.block-green-top {
  display: none; 
} 
.block-green {
  margin-left: 15px;  
}
.block-yellow {
  margin-left: 15px;  
}    
} 
@media(max-width:320px) {
.block-green {
  margin-left: 0px;  
}
.block-yellow {
  margin-left: 0px;  
}
.col-xs-320 {
  width: 100%;  
} 
.block {
  height: 100px;
}      
}         
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

<div class="container col-lg-12 space"></div>
    
<div class="container">      
    <div class="container col-xs-320 col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-1 borders block-gray"></div>
    <div class="container col-xs-320 col-xs-8 col-sm-8 col-md-8 hidden-lg text-center block">
        Your content that would fill this area
    </div>        
    <div class="col-xs-320 col-xs-4 col-sm-4 col-md-4 col-lg-2 block">
        <div class="col-xs-320 col-xs-12 col-sm-12 col-md-12 col-lg-12 borders block-green-top"></div>
        <div class="col-xs-320 col-xs-12 col-sm-12 col-md-12 col-lg-12 borders block-yellow"></div>
        <div class="col-xs-320 col-xs-12 col-sm-12 col-md-12 col-lg-12 borders block-yellow"></div>
        <div class="col-xs-320 col-xs-12 col-sm-12 col-md-12 col-lg-12 hidden-lg borders block-green"> </div>
    </div>    
</div> 
    
    
    
    
    
    <!-- Bootstrap core JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
</body>
</html>

＆＃13;

Answer 6

您可以使用嵌套和col排序类在Foundation中使用它。但是，这需要一些隐藏的列，并且隐藏的列必须与2个黄色块的高度相同...

<div class="row">
    <div class="large-8 medium-12 columns gr">
        -
    </div>
    <div class="large-4 large-reset-order medium-6 medium-push-6 small-6 small-push-6 columns">
        <div class="row">
            <div class="large-12 medium-12 small-12 columns hide-for-large-only hide-for-xlarge-only">
                &nbsp;
            </div>
            <div class="large-12 medium-12 small-12 columns hide-for-large-only hide-for-xlarge-only">
                &nbsp;
            </div>
            <div class="large-12 medium-12 medium-push-12 small-12 small-push-12 columns gre">
                green
            </div>
        </div>
    </div>
    <div class="large-4 medium-6 medium-pull-12 small-6 columns">
        <div class="row">
            <div class="large-12 medium-12 small-12 columns ye">
                1
            </div>
            <div class="large-12 medium-12 small-12 columns ye">
                2 
            </div>
        </div>
    </div>
</div>

演示：http://codeply.com/go/HmKmY5g5TB

以不同的屏幕大小重新排序列堆栈

6 个答案: