blocks|key|67876|text|有人给我链接了：What+is+the+best+way+to+move+an+element+that's+on+the+top+to+the+bottom+in+Responsive+design。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|67877|其中的解决方案工作得很完美。虽然它不支持旧的IE，但这对我来说并不重要，因为我使用的是针对移动设备的响应式设计。而且它适用于大多数移动浏览器。|67878|基本上，我有这样的想法：|67879|@media+(max-width:+30em)+{
++.container+{
++++display:+-webkit-box;
++++display:+-moz-box;
++++display:+-ms-flexbox;
++++display:+-webkit-flex;
++++display:+flex;
++++-webkit-box-orient:+vertical;
++++-moz-box-orient:+vertical;
++++-webkit-flex-direction:+column;
++++-ms-flex-direction:+column;
++++flex-direction:+column;
++++/*+optional+*/
++++-webkit-box-align:+start;
++++-moz-box-align:+start;
++++-ms-flex-align:+start;
++++-webkit-align-items:+flex-start;
++++align-items:+flex-start;
++}

++.container+.first_div+{
++++-webkit-box-ordinal-group:+2;
++++-moz-box-ordinal-group:+2;
++++-ms-flex-order:+2;
++++-webkit-order:+2;
++++order:+2;
++}

++.container+.second_div+{
++++-webkit-box-ordinal-group:+1;
++++-moz-box-ordinal-group:+1;
++++-ms-flex-order:+1;
++++-webkit-order:+1;
++++order:+1;
++}
}|code-block|syntax|javascript|67880|对我来说，这比浮点数工作得更好，因为我需要它们堆叠在一起，并且我有大约五个不同的div，我必须交换它们的位置。|67881|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/17115995/what-is-the-best-way-to-move-an-element-thats-on-the-top-to-the-bottom-in-respo^0|8|2K|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>Someone linked me this: <a href="https://stackoverflow.com/questions/17115995/what-is-the-best-way-to-move-an-element-thats-on-the-top-to-the-bottom-in-respo">What is the best way to move an element that&#39;s on the top to the bottom in Responsive design</a>.</p>

<p>The solution in that worked perfectly. Though it doesn’t support old IE, that doesn’t matter for me, since I’m using responsive design for mobile. And it works for most mobile browsers.</p>

<p>Basically, I had this:</p>

<pre class="lang-css prettyprint-override"><code>@media (max-width: 30em) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .first_div {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }

  .container .second_div {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}
</code></pre>

<p>This worked better than floats for me, because I needed them stacked on top of each other and I had about five different divs that I had to swap around the position of.</p>


blocks|key|67936|text|这个问题已经有了一个很好的答案，但本着探索所有可能性的精神，这里有另一种技术来重新排序dom元素，同时仍然允许它们占用空间，这与绝对定位方法不同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|67937|这种方法适用于所有现代浏览器和IE9%2B+(基本上任何支持display:table的浏览器)，但它的缺点是只能在最多3个兄弟项上使用。|67938|//the+html++++
<div+class='container'>
++++<div+class='div1'>1</div>
++++<div+class='div2'>2</div>
++++<div+class='div3'>3</div>
</div>

//the+css
.container+{
+++display:table;++++
}
.div1+{
++++display:table-footer-group;
}
.div2+{
++++display:table-header-group;
}
.div3+{
++++display:table-row-group;
}|code-block|syntax|javascript|67939|这会将元素从1,2,3重新排序到2,3,1。基本上，任何显示设置为table-header-group的元素都将位于顶部，而table-footer-group位于底部。当然，table-row-group会将一个元素放在中间。|67940|这种方法速度快，支持良好，并且比flexbox方法需要的css少得多，所以如果你只是想用几个项目来换取移动布局，那么就不要排除这个技术。|67941|您可以在codepen上查看现场演示：http://codepen.io/thepixelninja/pen/eZVgLx|offset|length|67942|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/thepixelninja/pen/eZVgLx^0|0|0|0|0|0|J|16|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>This question already has a great answer but in the spirit of exploring all possibilities here is another technique to reorder dom elements whilst still allowing them to take up their space, unlike the absolute positioning method.</p>

<p>This method works in all modern browsers and IE9+ (basically any browser that supports display:table) it has a drawback that it can only be used on a max of 3 siblings though.</p>

<pre><code>//the html    
&lt;div class='container'&gt;
    &lt;div class='div1'&gt;1&lt;/div&gt;
    &lt;div class='div2'&gt;2&lt;/div&gt;
    &lt;div class='div3'&gt;3&lt;/div&gt;
&lt;/div&gt;

//the css
.container {
   display:table;    
}
.div1 {
    display:table-footer-group;
}
.div2 {
    display:table-header-group;
}
.div3 {
    display:table-row-group;
}
</code></pre>

<p>This will reorder the elements from 1,2,3 to 2,3,1. Basically anything with the display set to table-header-group will be positioned at the top and table-footer-group at the bottom. Naturally table-row-group puts an element in the middle.</p>

<p>This method is quick with good support and requires much less css than the flexbox approach so if you are only looking to swap a few items around for a mobile layout for example then dont rule out this technique.</p>

<p>You can check out a live demo on codepen: <a href="http://codepen.io/thepixelninja/pen/eZVgLx" rel="noreferrer">http://codepen.io/thepixelninja/pen/eZVgLx</a></p>


blocks|key|284411|text|公认的答案适用于大多数浏览器，但由于某些原因，在iOS、Chrome和Safari浏览器上，应该显示second的内容被隐藏了。我尝试了一些其他步骤，强制内容堆叠在一起，最终我尝试了以下解决方案，获得了预期的效果(切换移动屏幕上的内容显示顺序)，没有堆叠或隐藏内容的bug：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|284412|.container+{
++display:flex;
++flex-direction:+column-reverse;
}

.section1,
.section2+{
++height:+auto;
}|code-block|syntax|javascript|284413|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The accepted answer worked for most browsers but for some reason on iOS Chrome and Safari browsers the content that should have shown second was being hidden. I tried some other steps that forced content to stack on top of each other, and eventually I tried the following solution that gave me the intended effect (switch content display order on mobile screens), without bugs of stacked or hidden content:</p>

<pre><code>.container {
  display:flex;
  flex-direction: column-reverse;
}

.section1,
.section2 {
  height: auto;
}
</code></pre>


blocks|key|284433|text|仅使用CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|284434|#blockContainer+{
display:+-webkit-box;
display:+-moz-box;
display:+box;

-webkit-box-orient:+vertical;
-moz-box-orient:+vertical;
box-orient:+vertical;
}
#blockA+{
-webkit-box-ordinal-group:+2;
-moz-box-ordinal-group:+2;
box-ordinal-group:+2;
}
#blockB+{
-webkit-box-ordinal-group:+3;
-moz-box-ordinal-group:+3;
box-ordinal-group:+3;|code-block|syntax|javascript|284435|}|284436|<div+id="blockContainer">
+<div+id="blockA">Block+A</div>
+<div+id="blockB">Block+B</div>
+<div+id="blockC">Block+C</div>
</div>|284437|http://jsfiddle.net/thirtydot/hLUHL/|offset|length|284438|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|10|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

<p>Using CSS only: </p>

<pre><code>#blockContainer {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
#blockA {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#blockB {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;
</code></pre>

<p>}</p>

<pre><code>&lt;div id="blockContainer"&gt;
 &lt;div id="blockA"&gt;Block A&lt;/div&gt;
 &lt;div id="blockB"&gt;Block B&lt;/div&gt;
 &lt;div id="blockC"&gt;Block C&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/thirtydot/hLUHL/" rel="noreferrer">http://jsfiddle.net/thirtydot/hLUHL/</a></p>


blocks|key|68031|text|在某些情况下，您可以只使用flex-box属性order。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|68032|非常简单：|68033|.flex-item+{
++++order:+2;
}|code-block|syntax|javascript|68034|请参阅：https://css-tricks.com/almanac/properties/o/order/|68035|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/almanac/properties/o/order/^0|D|8|N|5|0|0|0|4|1E|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>In some cases you can just use the <code>flex-box</code> property <code>order</code>.</p>

<p>Very simple:</p>

<pre><code>.flex-item {
    order: 2;
}
</code></pre>

<p>See: <a href="https://css-tricks.com/almanac/properties/o/order/" rel="noreferrer">https://css-tricks.com/almanac/properties/o/order/</a></p>


blocks|key|68064|text|这个解决方案对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|68065|使用像这样的父元素：|68066|.parent-div+{
++++display:flex;
++++flex-direction:+column-reverse;
}|code-block|syntax|javascript|68067|在我的例子中，我不需要更改需要切换的元素的css。|68068|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This solution worked for me:</p>

<p>Using a parent element like:</p>

<pre><code>.parent-div {
    display:flex;
    flex-direction: column-reverse;
}
</code></pre>

<p>In my case I didn't have to change the css of the elements that I needed to switch. </p>


blocks|key|68089|text|假设两个元素都有50%25的宽度，下面是我使用的内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|68090|css：|68091|++.parent+{
++++width:+100%25;
++++display:+flex;
++}++
++.child-1+{
++++width:+50%25;
++++margin-right:+-50%25;
++++margin-left:+50%25;
++++background:+#ff0;
++}
++.child-2+{
++++width:+50%25;
++++margin-right:+50%25;
++++margin-left:+-50%25;
++++background:+#0f0;
++}|code-block|syntax|javascript|68092|html：|68093|<div+class="parent">
++<div+class="child-1">child1</div>
++<div+class="child-2">child2</div>
</div>|68094|示例：https://jsfiddle.net/gzveri/o6umhj53/|offset|length|68095|顺便说一句，这种方法适用于一长串元素中的任意两个相邻元素。例如，我有一个很长的元素列表，每行有两个元素，我想要交换列表中的第三个和第四个元素，以便它以国际象棋风格呈现元素，然后我使用以下规则：|68096|++.parent+>+div:nth-child(4n%2B3)+{
++++margin-right:+-50%25;
++++margin-left:+50%25;
++}
++.parent+>+div:nth-child(4n%2B4)+{
++++margin-right:+50%25;
++++margin-left:+-50%25;
++}|68097|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/gzveri/o6umhj53/^0|0|0|0|0|0|3|11|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|17|8|@]|9|@$O|18|P|19|1|1A]]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>assuming both elements have 50% width, here is what i used:</p>
<p>css:</p>
<pre><code>  .parent {
    width: 100%;
    display: flex;
  }  
  .child-1 {
    width: 50%;
    margin-right: -50%;
    margin-left: 50%;
    background: #ff0;
  }
  .child-2 {
    width: 50%;
    margin-right: 50%;
    margin-left: -50%;
    background: #0f0;
  }
</code></pre>
<p>html:</p>
<pre><code>&lt;div class=&quot;parent&quot;&gt;
  &lt;div class=&quot;child-1&quot;&gt;child1&lt;/div&gt;
  &lt;div class=&quot;child-2&quot;&gt;child2&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>example: <a href="https://jsfiddle.net/gzveri/o6umhj53/" rel="nofollow noreferrer">https://jsfiddle.net/gzveri/o6umhj53/</a></p>
<p>btw, this approach works for any 2 nearby elements in a long list of elements. For example I have a long list of elements with 2 items per row and I want each 3-rd and 4-th element in the list to be swapped, so that it renders elements in a chess style, then I use these rules:</p>
<pre><code>  .parent &gt; div:nth-child(4n+3) {
    margin-right: -50%;
    margin-left: 50%;
  }
  .parent &gt; div:nth-child(4n+4) {
    margin-right: 50%;
    margin-left: -50%;
  }
</code></pre>


blocks|key|284556|text|昨天也遇到了同样的问题。网格区域在我的例子中工作得很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|284557|.content-body+{
++++display:+grid;
++++grid-template-areas:+"+left+right+";
++++grid-template-columns:+1fr+1fr;
}
.first_div+{
++++grid-area:+right;
}
.second+{
++++grid-area:+left;
}|code-block|syntax|javascript|284558|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Yesterday ran into the same problem. Grid areas worked out great in my case:</p>
<pre><code>.content-body {
    display: grid;
    grid-template-areas: &quot; left right &quot;;
    grid-template-columns: 1fr 1fr;
}
.first_div {
    grid-area: right;
}
.second {
    grid-area: left;
}
</code></pre>


blocks|key|284573|text|你不需要任何花哨的东西。复制第二个div，并将其放在顶部。像这样|type|unstyled|depth|inlineStyleRanges|entityRanges|data|284574|<div+id="second_div_copy"></div>
<div+id="first_div"></div>
<div+id="second_div"></div>|code-block|syntax|javascript|284575|如果希望第一个second_div_copy显示在顶部，则给出div+display:+none。如果希望第二个div显示在顶部，则给出second_div_copy+display:块和second_div+display:+none。|284576|事情真的就这么简单。还是我错过了什么？|284577|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You don't need anything fancy. Make a copy of your second div, and place it on top. Like this</p>
<pre><code>&lt;div id=&quot;second_div_copy&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;first_div&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;second_div&quot;&gt;&lt;/div&gt;
</code></pre>
<p>Give the second_div_copy display: none when you want first div to appear on top. Give the second_div_copy display: block, and the second_div display: none when you want the second div to appear on top.</p>
<p>It's really that simple. Or am I missing something ?</p>


<p>I'm trying to swap two <code>div</code>s' locations for responsive design (the site looks different depending on width of the browser/good for mobile).</p>

<p>Right now I have something like this:</p>

<pre class="lang-html prettyprint-override"><code>&lt;div id="first_div"&gt;&lt;/div&gt;
&lt;div id="second_div"&gt;&lt;/div&gt;
</code></pre>

<p>But would it be possible to swap their placements to make it look like <code>second_div</code> is first, using CSS only? The HTML stays the same. I've tried using floats and stuff but it doesn't seem to work the way I want it to. I don't want to use absolute positioning because the heights of the <code>div</code>s are always changing. Are there any solutions, or is there just no way to do this?</p>


Swap DIV position with CSS only

响应式设计

我正在尝试将两个div的位置换成响应式设计(根据浏览器的宽度，网站看起来会有所不同/适合移动设备)。现在我有这样的东西：<div id="first_div"></div><div id="second_div"></div>但是，有没有可能交换他们的位置，让它看起来像second_div是第一个，只使用CSS？HTM...

问仅与CSS交换DIV位置
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅与CSS交换DIV位置EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问仅与CSS交换DIV位置
EN