Question

我希望社交在BC和标题之后显示。

您可以帮助使用我创建的JSFiddle。

所以顺序应该像

BC
Header
social
dfgh.

我想要这个，因为在切换到移动设备时交换内容。

我的HTML应该是相同的，但你可以改变CSS

#flex {
  display: flex;
  /* Optional, if you want the DIVs 100% width: */
  flex-direction: column;
}

#flex>#a {
  order: 3;
}

#flex>#b {
  order: 1;
}

#flex>#c {
  order: 2;
}

#flex>#d {
  order: 4;
}

<div id="abc">
  <div id="flex">
    <div id="a">social</div>
    <div class="navya" id="navya">
      <div id="b">BC</div>
      <div id="c">Header</div>
      <div id="d"> dfgh</div>
    </div>
  </div>
</div>

https://jsfiddle.net/j35yyy47/9/

Answer 1

通过CSS执行此操作的唯一方法是使用display:contents;，这只是Firefox支持的时间。 https://caniuse.com/#search=contents

https://developer.mozilla.org/en-US/docs/Web/CSS/display

<强> <display-box>

这些值定义元素是否完全生成显示框。

价值＆amp; 说明下面

内容

这些元素本身不会产生特定的盒子。它们被伪盒子和子盒子取代。

无

关闭元素的显示，使其对布局没有影响（文档呈现为元素不存在）。所有后代元素的显示都会关闭。

要让元素占用通常需要的空间，但实际上不渲染任何内容，请使用visibility属性。

仅在firefox中进行测试的代码段

＆＃13;

#flex {
  display: flex;
  /* Optional, if you want the DIVs 100% width: */
  flex-direction: column;
}

#navya {
  display: contents;
}

#flex #a {
  order: 3;
  color:red
}

#flex #b {
  order: 1;
}

#flex #c {
  order: 2;
}

#flex #d {
  order: 4;
}
@supports (display:contents ){
.disclaimer {display:none;}
}

＆＃13;

<div id="abc">
<p class="disclaimer"><code>display:contents; </code> is not supported in your browser</p>
  <div id="flex">
    <div id="a">social</div>
    <div class="navya" id="navya">
      <div id="b">BC</div>
      <div id="c">Header</div>
      <div id="d"> dfgh</div>
    </div>
  </div>
</div>

＆＃13;

在firefox中渲染：

您需要手动更改html结构或使用javascript动态

jquery https://api.jquery.com/insertBefore/或https://api.jquery.com/insertAfter/

的快速示例

＆＃13;

$('#a').insertAfter('#d');

＆＃13;

#flex {
  display: flex;
  /* Optional, if you want the DIVs 100% width: */
  flex-direction: column;
}

#navya {
  display: flex;
  flex-direction:column;
}

#flex #a {
  order: 3;
  color:red
}

#flex #b {
  order: 1;
}

#flex #c {
  order: 2;
}

#flex #d {
  order: 4;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">
<div id="flex">
    <div id="a">social</div>
    <div class="navya" id="navya">
      <div id="b">BC</div>
      <div id="c">Header</div>
      <div id="d"> dfgh</div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

不确定问题是否正确。从我的理解，你想显示divs＆＃39;根据屏幕尺寸的不同顺序。即移动或网络。

如果是这种情况，我会使用媒体查询：

@media (max-width: 575px) {
  #flex > #c { order: 2; }
  #flex > #d { order: 4; }
}

@media (min-width: 576px) {
  #flex > #b { order: 1; }
  #flex > #c { order: 2; }
}

您只需根据您的要求更新最小和最大宽度。

我希望使用CSS和HTML交换div

2 个答案: