Question

我的标记是

<div class="info-container">
     <span class="item1">item1</span>
     <a class="item2" href="#">item2</a>
     <a class="item3"   href="#">item3</a>
</div>

当媒体宽度达到800像素时，我想重新排列到下面（@media（min-width：800px））

<div class="info-container">
     <a class="item2" href="#">item2</a>
     <span class="item1">item1</span>
     <a class="item3"   href="#">item3</a>
</div>

到目前为止，我只对我的应用程序使用了angularjs（上面的代码在一个附加到控制器的视图中）。实现这一目标的最佳方法是什么？我应该使用angularjs来做到这一点吗？或者是在我的控制器中使用JS或JQuery执行此操作的唯一方法？我不想使用flexbox解决方案。

Answer 1

这里有一篇关于这个问题的好文章：

http://www.jtudsbury.com/thoughts/rearrange-div-order.php

Answer 2

一个简单的解决方案是在a.item2之后复制span.item1并使用display：none;在上面。当宽度超过800px时，您将显示它并隐藏第一个跨度。

所以你会：

<div class="info-container">
    <span class="item1">item1</span>
    <a class="item2" href="#">item2</a>
    <span class="item1" style="display:none;">item1</span>
    <a class="item3"   href="#">item3</a>
</div>

<style>
    @media (min-width:800px){

        .info-container .item1
        {
            display:block;
        }
        .info-container:first-child
        {
             display:none;
        }
    }
</style>

Answer 3

这有什么好处？ ##编辑由于某种原因，不会在SO片段上工作，小提琴补充道 JS FIDDLE

＆＃13;

$( window ).resize(function() {
 if( $('document').width() <="800"){
   var span=$('span.item1');
   span.remove();
   $('a.item2').append(span);
 }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-container">
     <span class="item1">item1</span>
     <a class="item2" href="#">item2</a>
     <a class="item3"   href="#">item3</a>
</div>

＆＃13;

重新排列元素顺序响应设计

3 个答案: