Question

我正在寻找一种跨浏览器的方式来设置基于屏幕大小的元素的不同位置和显示顺序，同时保持初始DOM顺序。元素最初位于不同的容器中，媒体查询中的float / clear等标准方式可能不够。

此外，如果它是纯CSS解决方案，那就太好了。

这个小提琴使用javascript来加载DOM并调整大小事件，这是不受欢迎的。

HTML：

<body>
  <div id="header">HEADER</div>
  <div id="left_column">
    <div id="left_box_1">LEFT BOX 1</div>
    <div id="left_box_2">LEFT BOX 2</div>
  </div>
    <div id="main_content_holder_for_big_devices"></div>
  <div id="right_column">
    <div id="right_box_1">RIGHT BOX 1</div>
    <div id="main_content_holder_for_small_devices">
      <div id="mid_column">MID COLUMN</div>
    </div>
    <div id="right_box_2">RIGHT BOX 2</div>
  </div>
</body>

CSS：

#header {
  width: 100%;
  height: 80px;
  background: red;
}
#mid_column {
  background: aqua;
  height: 60px;
}
#left_box_1, #left_box_2 {
  background: blue;
  height: 40px;
}
#right_box_1 {
  background: yellow;
  height: 40px;
}
#right_box_2 {
  background: purple;
  height: 40px;
}
@media screen and (min-width: 600px) {
  body {
    width: 600px;
  }
  #left_column, #mid_column, #right_column {
    float: left;
  }
  #left_box_1, #left_box_2, #right_box_1, #right_box_2 {
    width: 150px;
  }
  #mid_column {
    width:300px;
    background: aqua;
  }
}

使用Javascript：

const SMALL_DEVICE_WIDTH = 600;

var $holder_for_small = $( "#main_content_holder_for_small_devices" );
var $holder_for_big = $( "#main_content_holder_for_big_devices" );

window.addEventListener( "resize", move_content_in_dom );
window.addEventListener( "load", move_content_in_dom );

function move_content_in_dom() {
    var w = window.innerWidth;
    if( w < SMALL_DEVICE_WIDTH ) {
    if( $holder_for_big.html() !== "" ) {
      $holder_for_small.html( $holder_for_big.html() );
      $holder_for_big.html( "" );
    }
  } else {
    if( $holder_for_small.html() !== "" ) {
      $holder_for_big.html( $holder_for_small.html() );
      $holder_for_small.html( "" );
    }
  }
}

此图片说明了我想要实现的布局。在像手机这样的小型设备上，在标题顶部之后，我想要从左栏开始，在它们之后我想要一个来自右列的框，然后是主要内容，然后是右列中的另一个框

我希望得到一个能给我正确工具的答案，所以我不必重新发明轮子。

Answer 1

目前，您尝试执行的操作仅适用于Firefox的纯CSS。这有点复杂，但是你要抽象地做的是将孙子元素独立于子元素（独立于列的项目）。这在Firefox中是可行的，因为它实现了display: contents，它允许子元素变为＆＃34;不可见＆＃34;给他们的父母，给你CSS控制孙子元素的顺序。这就是我的意思：

＆＃13;

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 3px #000;
  font-family: sans-serif;
}

.flex-container {
  display: flex;
  width: 100%;
  background-color: gray;
  margin-bottom: 5vh;
  flex-wrap: wrap;
  align-items: stretch;
}
.flex-container .cell {
  padding: 4vmin;
}
.flex-container .flex-header {
  background-color: red;
  width: 100%;
}
.flex-container .flex-sideNav {
  background-color: blue;
  flex: 1;
}
.flex-container .flex-mainContainer {
  background-color: green;
  flex: 2;
}
.flex-container .flex-mainContainer div {
  background-color: aqua;
}
.flex-container .flex-rightColumn {
  flex: 1;
}
.flex-container .flex-toolbar {
  background-color: yellow;
}
.flex-container .flex-adContainer {
  background-color: purple;
}

@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-container > div {
    width: 100%;
    flex: 1 0;
  }
  .flex-container .flex-header {
    order: 1;
  }
  .flex-container .flex-sideNav {
    order: 2;
  }
  .flex-container .flex-toolbar {
    order: 3;
    width: 100%;
  }
  .flex-container .flex-mainContainer {
    order: 4;
  }
  .flex-container .flex-adContainer {
    order: 5;
    width: 100%;
  }
  .flex-container .flex-rightColumn {
    display: contents;
  }
}

＆＃13;

<div class='flex-container'>
	<div class='flex-header  cell'>
		Header.
	</div>
	<div class='flex-sideNav'>
		<div class='cell'>Sidenav One.</div>
		<div class='cell'>Sidenav, Redux.</div>
	</div>
	<div class='flex-mainContainer'>
		<div class='cell'>Main item, one.</div>
		<div class='cell'>Main item, two.</div>
		<div class='cell'>Main item, three.</div>
	</div>
	<div class='flex-rightColumn'>
		<div class='flex-toolbar  cell'>
			Toolbar.
		</div>
		<div class='flex-adContainer  cell'>
			Ads.
		</div>
	</div>
</div>

＆＃13;

（此处＆＃39; sa codepen为了您的方便）...您会注意到非Firefox浏览器，工具栏无法与<分开纯CSS中的em> Ads ，但Firefox正确实现了此规则：

.flex-container .flex-rightColumn {
    display: contents;
  }

你得到了你想要的东西。如此简短的回答：使用flexbox，它今天看起来只适用于Firefox;使用JavaScript，它今天将为每个人工作。祝你好运！

根据屏幕大小重新排序不同容器中的元素

1 个答案: