Html 按不同屏幕大小对列堆栈重新排序 在引导或基础上说， 有可能实现这种布局吗

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

---

您有什么想法吗？

您可以使用CSS中的

order

属性和flex Box

---

在这里查看浏览器兼容性

基础，可以使用大小推单元和大小拉单元类。例如：.small-push-10或.large-pull-7，以调整多个列的定位。请注意，还必须在相关元素上设置相反的值。因此，对于您的示例，如果每个框都有12列宽，那么在绿色框中有small-push-24类（所有要推过去的元素的总宽度），在每个黄色框中有small-pull-12类（推过去的元素的宽度）

---

您可以在“源代码排序”标题下的文档中了解到这一点：

这是我所能得到的最接近的结果：请参阅

当我想将一些列堆叠在彼此的顶部时——我只给它们12号（参见示例2），引导程序知道如何处理它，不幸的是，在嵌套模式中似乎不起作用。

---

祝你好运。

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

1.）如果这些块中的内容不是动态的（意味着高度一致），您可以使用负边距伪造此顺序

2.）如果绿色区域表示的块不是特别复杂，则可以在页面中放置两次，并根据媒体查询根据需要显示/隐藏每个块

---

（这些都需要像respond.js这样的东西才能让IE8更好地处理媒体查询：）

，您好，看看这个我使用引导和一些媒体查询断点来完成一些显示和隐藏等操作。
也没有推/拉，也没有负边距值。只是简单的直截了当的方法。
看一看，当你调整它的大小时，这种方式是否适合你

这里是的大视图

启动模板
身体{
填充顶部：50px；
}
.空间{
利润率最高：5%；
利润底部：5%；
}    
.块灰色{
利润率最高：2%；
高度：300px；
背景色：暗灰色；
}
.block绿顶{
利润率最高：0%；
高度：100px；
背景颜色：绿黄色；
}     
.块绿色{
利润率最高：2%；
高度：100px；
背景颜色：绿黄色；
} 
.块黄色{
利润率最高：2%；
高度：100px；
背景颜色：黄色；
}     
.右转{
利润率最高：2%；
}
.街区{
利润率最高：2%；
高度：400px；
}    
.边界{
边界半径：5px 5px 5px；
-moz边界半径：5px 5px 5px 5px；
-webkit边界半径：5px 5px 5px 5px；
边框：2倍实心#000000；
}
@介质（最大宽度：1200px）{
.block绿顶{
显示：无；
} 
.块绿色{
左边距：15px；
}
.块黄色{
左边距：15px；
}    
} 
@介质（最大宽度：320px）{
.块绿色{
左边距：0px；
}
.块黄色{
左边距：0px；
}
.col-xs-320{
宽度：100%；
} 
.街区{
高度：100px；
}      
}         
切换导航





您的内容将填充此区域
<代码> > p>您可以在嵌套和COL排序类的基础上进行工作。但是，这需要一些隐藏列，并且隐藏列的高度必须与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>


-
绿色
1.
2.

演示：
Use Flex Box Layout Flex item具有排序和最佳布局。如果您的页面结构真的很奇怪，并且您想这样做，您可能会感兴趣，尽管我不会称之为production-ready。如果这不起作用，那么您的代码可能会希望重构。确定吗？在基础类中没有.PUB-PHI-24。@ RoNeL卡斯蒂略OcAMPO取决于您安装了多少列。我经常使用36根柱子。我链接到的文档页面有默认列设置的工作示例。我们使用了12列。所以任何其他的工作围绕着使用12栏的基础重新排序柱子吗？@ RoNeL卡斯蒂略OcAMPO技术，只是列的数量将根据你所做的不同而变化。我链接到的文档涵盖了所有内容。这太棒了，我喜欢它。如果不太麻烦的话，请你带我走过
-我不知道你是怎么做到的。还有什么
s
col-xs-320`？您好，div只有类
container
，您根本不需要它。我只是用它来包装代码，这样在为这个演示调整大小时它就不会扩展到全屏，它只是在两侧添加了大量的填充/边距。当您在代码中使用它时，只需删除它。在主代码中，您可以看到我使用
隐藏lg
以及媒体断点来控制隐藏某些div。。顶部的绿色div和灰色div下面的一个大div。我创建了
col-xs-320
，以在320 px的断点处更改所有div的状态。这有帮助吗。
.greenTop {display:none;}

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

<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>