在 Bootstrap 或 Foundation 中说， 有没有可能实现这样的布局？
你看到这里的问题了吗？ 在平板电脑大小时，顶栏应位于底部。 推/拉技巧在这里不适用，因为这是 不同类型的列重新排序。
你有什么想法吗？
【问题讨论】：
标签： html css twitter-bootstrap responsive-design zurb-foundation
您可以将 CSS 中的 order 属性与弹性框一起使用。
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#order
在此处检查浏览器兼容性http://caniuse.com/#search=order
【讨论】：
借助 Foundation，您可以使用 size-push-units 和 size-pull-units 类。例如：.small-push-10 或 .large-pull-7，以调整那么多列的位置。请注意，您还必须在相关元素上设置相反的值。因此，对于您的示例，如果每个框都是 12 列宽，那么在绿色框上，您将拥有 small-push-24 类（您要推过的所有元素的总宽度），并且在每个黄色框，您将拥有 small-pull-12（推过它们的元素的宽度）。
您可以在此处的“源排序”标题下的文档中阅读它：http://foundation.zurb.com/docs/components/grid.html
【讨论】：
这是我所能得到的最接近的结果：请参阅example #1。
当我想将一些列堆叠在一起时 - 我只给它们 12 的大小（参见示例 #2）并且引导程序知道如何处理它，不幸的是它似乎不适用于嵌套。 祝你好运。
【讨论】：
您对 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）
【讨论】：
Ronnel Castillo Ocampo，您好，看看这个 Fiddle 我使用 Bootstrap 和一些媒体查询断点来做一些显示和隐藏等操作。
也没有推/拉，也没有负边距值。只是一个简单直接的方式。
当你调整它的大小时，看看这种方式是否适合你。
这是 Fiddle 的大视图。
<!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>【讨论】：
<div class="container"> - 我不明白你是怎么做到的。什么s col-xs-320`？
container 类的 div 你根本不需要这个。我只是用它来包装代码，因此在为这个演示调整大小时它不会扩展到全屏，它只是在侧面添加了很多填充/边距。当您在代码中使用它时，只需将其删除。使用主代码，您可以看到我使用hidden-lg 以及媒体断点来控制隐藏一些 div .. 顶部的绿色 div 和灰色 div 下方的大 div。我创建了col-xs-320 以在 320 像素的断点处更改所有 div 的状态。这有帮助吗。只需在此处询问您是否需要更多解释。
container 扮演包装器的角色，并且有自己的边距和填充等。起初，我认为您的block-green-top 和block-green 是同一个块，并且将包含相同的信息，但后来我意识到不是。所以没有进一步的问题，感谢您的跟进。
您可以通过嵌套和排序类在 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">
</div>
<div class="large-12 medium-12 small-12 columns hide-for-large-only hide-for-xlarge-only">
</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>
【讨论】：