Question

我有2个DIV＆＃39>：

<div class="a">Lorem 1</a>
<div class="b">Lorem 2</a>

在小于480px（移动设备）的分辨率下更改订单的最简单方法是什么？

我尝试过使用appendTo和prependTo，但没有运气。主要问题是这只需要在480px以下的分辨率下发生......

有什么建议吗？

Answer 1

使用javascript：

<强> HTML

<div id="container">
    <div class="a">Lorem 1</a>
    <div class="b">Lorem 2</a>
</div>

<强> JS

$(document).ready(function() {   
    $( window ).resize(function() {
        if( $(window).width() < 480 ) {
            $('.b').insertBefore($('.a'));
        }
    });
});

jsfiddle：https://jsfiddle.net/veny2zua/1/

基本上它非常简单。您只需收听resize()事件，每次检查window's width()时，如果它在480px下，您只需将其反转。

编辑：

如果您需要带有课程的div＆＃34; a＆＃34;当宽度超过480px时首先回来，我写了脚本让它工作：

$(document).ready(function() { 

    var $a = $('.a');
    var $b = $('.b');

    $( window ).resize(function() {
        if( $(window).width() < 480 ) {
            $b.insertBefore($a);
        } else {
            if( $a.prev().is("div.b") ) {
                $a.insertBefore($b);  
            }
        }
    });
});

小提琴：https://jsfiddle.net/veny2zua/2/ 我测试得很快，看起来好像在工作，但是关心可能的错误！：）

Answer 2

根据您需要支持的浏览器，您可以结合使用flexbox和媒体查询。

鉴于此标记：

insert(H,[P|Q],[H,P|Q]).

您可以使用此CSS将断点下面的两个反转：

<div class="container">
    <div class="a">Lorem 1</div>
    <div class="b">Lorem 2</div>
</div>

这将有效地翻转两者。但是，browser support varies and you will need to use the appropriate vendor prefixes.

Answer 3

您可以使用Flexbox轻松完成此操作。您不需要Javascript或jQuery。但是，浏览器支持为>=IE10。

private HashMap<String, String> readCountry(XmlPullParser parser) 
            throws XmlPullParserException, IOException
{   
    parser.require(XmlPullParser.START_TAG, ns, "label");
    String labelid = parser.getAttributeValue(ns, "id");
    String textlan = "";
    String textval="";
    String capital="";
    String currencyCode="";
    String currency="";

    HashMap<String, String> hm = new HashMap<String, String>();
    ArrayList<HashMap> al=new ArrayList<HashMap>();

    while(parser.next() != XmlPullParser.END_TAG){
        if(parser.getEventType() != XmlPullParser.START_TAG){
            continue;
        }

        String name = parser.getName();
         if(name.equals("text")){
             textlan = parser.getAttributeValue(ns, "language");
             textval = parser.getAttributeValue(ns,"value");
            readCapital(parser);

            String details =    "Language : " + textlan + "\n" +
                        "Value : " + textval + "\n";
            hm.put(labelid, details);
            al.add(hm);
        }else{
            skip(parser);
        }
    }
    someArray = compareXMLValues(timeSessionId,al);
    //return al;
    return someArray;
}



compareXMLValues(timeSessionId,al)
{
    parse full XML of syncgroupsettings;
    And compare if (timeSessionId == parser.getAttributeValue(ns, "labelid"))
    {
    if it is true-
    read from while loop, syncgroupname and store in Array list of Strings.
    }
    else
    {
    continue;
    }
}

@media (max-width: 768px) { /* Change it to 480px, 768px for demo purpose */
  .container {
    display: flex;
    flex-direction: column; /* Vertical stacking */
  }
  .a {
    order: 2; /* Default is 1, thus 2 will be higher than .b's order 1. */
  }
}

根据特定决议重组DIV

3 个答案: