Html 更改响应式设计的 Div 顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12933356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Div order on Responsive Design
提问by Jamie Teuma
I am creating a responsive design website.
我正在创建一个响应式设计网站。
Basically when the view port is lower than X I want to show the menu at the foot of the page.
基本上当视口低于XI时要在页面底部显示菜单。
EXAMPLE LINK DEAD - SITE NO LONGER OWNED BY ME
示例链接已死 - 我不再拥有该站点
IF you resize your browser window, you will notice 3 different designs (Based on end goal design rather than device types)
如果您调整浏览器窗口的大小，您会注意到 3 种不同的设计（基于最终目标设计而不是设备类型）
V1: greater than 999px, You will see Red box top left, blue box next to red box.
V1：大于 999px，您将看到左上角的红色框，红色框旁边的蓝色框。
V2: between 600px and 999px, You will notice red box gets smaller, blue box now sits under red box
V2：在 600px 和 999px 之间，您会注意到红色框变小，蓝色框现在位于红色框下方
v3: Less than 600px, You will notice again red box gets smaller, blue box now yellow.
v3：小于 600px，您会再次注意到红色框变小，蓝色框变为黄色。
Basically, in V3, I want to make the now yellow box, sit under the green box, above the grey box
基本上，在 V3 中，我想制作现在的黄色框，位于绿色框下方，灰色框上方
so the order goes Red Box Green Box Yellow box Grey Box
所以订单是红色框绿色框黄色框灰色框
Other than the nasty hide old div, show new div hack (technique) or JS version (goes away from CSS Responsive) Is there a way to move this.
除了讨厌的隐藏旧 div，显示新的 div hack（技术）或 JS 版本（远离 CSS 响应）有没有办法移动它。
CSS is within the file, so view source shows everything.
CSS 位于文件中，因此查看源代码会显示所有内容。
Cheers
干杯
回答by Rick Calder
I honestly can't think of a way to do this in CSS alone, but it is easily doable in jQuery without breaking your responsive design. Your CSS doesn't need to change except to remove the margin-top from the #top-links div.
老实说，我想不出单独在 CSS 中做到这一点的方法，但它在 jQuery 中很容易做到，而不会破坏您的响应式设计。除了从 #top-links div 中删除 margin-top 之外，您的 CSS 不需要更改。
<script type="text/javascript">
$(document).load($(window).bind("resize", listenWidth));
function listenWidth( e ) {
if($(window).width()<600)
{
$("#topLinks").remove().insertAfter($("#content"));
} else {
$("#topLinks").remove().insertBefore($("#content"));
}
}
</script>
回答by Mario
I have just implemented a solution from
我刚刚实施了一个解决方案
http://www.jtudsbury.com/thoughts/rearrange-div-order.php
http://www.jtudsbury.com/thoughts/rearrange-div-order.php
that uses display: table-header-group;and display: table-footer-group;
使用display: table-header-group;和display: table-footer-group;
Here is my example for two horizontal 50% width boxes that switch to right above left box on shrinking window width:
这是我的两个水平 50% 宽度框的示例，它们在缩小窗口宽度时切换到左框正上方：
.box-container {
display: table;
}
.box-50 {
width: 50%;
display: table-cell;
padding: 0 20px;
}
@media only screen and (max-width : 700px) {
.box-container {
display: block;
}
.box-50 {
display: block;
width: 100%;
}
/* http://www.jtudsbury.com/thoughts/rearrange-div-order.php */
.box-50.left {
display: table-footer-group;
}
.box-50.right {
display: table-header-group;
}
}
回答by Umair
Yes it is very simple to change the order of divs in a container. Please have a look into my working HTML css code.
是的，更改容器中 div 的顺序非常简单。请查看我的工作 HTML css 代码。
<html>
<head>
<style type="text/css">
#nav_bar{
width:100%;
height:50px;
background:red;
}
#container{
width:100%;
height:500px;
}
#left_panel {
position:relative;
float:left;
width:250px;
border:0px solid black;
background:#ccc;
height:100%;
}
#right_panel{
width:100%;
background:#666;
height:100%;
}
#inner_container{
height:100%;
}
.center {
margin-left: auto;
margin-right: auto;
width: 40%;
padding-top:50px;
}
.data_container{
border:1px solid black;
float:left;
position:relative;
padding:10px;
}
#footer{
width:100%;
height:50px;
background:blue;
}
@media all and (max-width: 700px) {
#container {
width: 100%;
height: 500px;
display: flex;
flex-flow: column-reverse ;
}
#left_panel {
width:100%;
height:200px;
}
#right_panel{
width:100%;
height:300px;
}
}
</style>
</head>
<body>
<div id="nav_bar">Nav</div>
<div id="container">
<div id="left_panel">
<div class="center">
Left Panel content
</div>
</div>
<div id="right_panel">
<div id="inner_container" class="center">
<div class="data_container">
Action Item 1
</div>
<div class="data_container">
Action Item 2
</div>
<div class="data_container">
Action Item 3
</div>
</div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
回答by Afshin
Try this Maybe Helpful
试试这个也许有帮助
@media (min-width:1px) and (max-width:599px) {
#pageFrame {
width:100%;
}
#logo {
margin:0 auto;
width:50px;
height:50px;
}
#topLinks {
position:absolute;
top:250px;
float:right;
width:100%;
background-color:yellow;
}
#content {
position:absolute;
top:100px;
clear:none;
float:left;
width:100%;
}
#footer {
position:absolute;
top:350px;
clear:both;
width:100%;
}
回答by justinavery
Flex-Box is the answer you are looking for. Check out ( this link is now broken - http://www.jordanm.co.uk/lab/contentchoreography) for a full explanation for all of Flexbox features https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flex-Box 是您正在寻找的答案。查看（此链接现已失效 - http://www.jordanm.co.uk/lab/contentchoreography）以获取所有 Flexbox 功能的完整说明https://css-tricks.com/snippets/css/a- flexbox 指南/
回答by AHMED.D
Try to create two divs one in the footer and one in header, "display:none" the bottom one when the screen is less then X show it.
尝试创建两个 div，一个在页脚，一个在页眉，“显示：无”当屏幕小于 X 时显示底部的一个。
回答by adriendenat
You should have a look at the directioncss property.
https://developer.mozilla.org/en-US/docs/Web/CSS/direction
你应该看看directioncss 属性。
https://developer.mozilla.org/en-US/docs/Web/CSS/direction
What you can do is:
你可以做的是：
direction: rtl;on your parent container :.container { direction: rtl; }- reset it to normal on the direct children :
.container > * { direction: ltr; } - Change the order of your divs in your HTML to display things in the right order on desktop version
direction: rtl;在您的父容器上：.container { direction: rtl; }- 在直接孩子上将其重置为正常：
.container > * { direction: ltr; } - 更改 HTML 中 div 的顺序，以在桌面版本中以正确的顺序显示内容
And this is working on every browsers cause this property is supported everywhere (from IE 5.5...).
这适用于所有浏览器，因为此属性在任何地方都受支持（从 IE 5.5 ...）。
回答by Matoeil
using EventListener and matchMedia:
使用 EventListener 和 matchMedia：
//on load
responsive_change_box_order();
//on resize
window.addEventListener('resize', responsive_change_box_order );
function responsive_change_box_order() {
if (window.matchMedia("(max-width: 1118px)").matches) {
jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content"));
}
else{
jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner"));
}
}
回答by JacobLett
If you are using Bootstrap 4, I created a simple plugin to check for the current media query breakpoint and then set it as a variable.
如果您使用的是 Bootstrap 4，我创建了一个简单的插件来检查当前的媒体查询断点，然后将其设置为变量。
You can then do something like
然后你可以做类似的事情
if ( xs == true ) {
$("#topLinks").remove().insertAfter($("#content"));
}
You can get it here: https://jacoblett.github.io/IfBreakpoint/
你可以在这里得到它：https: //jacoblett.github.io/IfBreakpoint/
