幅の変更に基づいてフォームフィールドを並べ替える

私のウェブサイトには3つのフィールドを含む計算フォームがあります。幅の変更に基づいてフォームフィールドを並べ替える

罰金である、フィールドが3,2,1の正しい水平オーダー（RTL形式）

であるが、私は携帯電話上でページを表示した場合、フィールドが縦に表示されるPC上のフォームを見ながら。注文は後ろにあります：

ページ幅に基づいてJSを使用して注文を変更するにはどうすればよいですか？

The Form

出典

2017-03-23 Trance84

https://www.w3.org/International/questions/qa-html-dirが逆になります –

私はCSSを使用して、この周りに行くために管理：

@media (max-width: 480px) 
{ 
    .row 
    { 
     display: flex; 
     flex-direction: column-reverse; 
    }

出典

2017-03-23 12:56:37 Trance84

HTML：

<body> 
    <div id='parent'> 
     <div order="1">A</div> 
     <div order="2">B</div> 
     <div order="3">C</div> 
    </div> 
</body>

JS：

var parent = $('#parent'); 
    var child = parent.find('div'); 
    // if window size smaller than 480, reverse the order 
    if (window.innerWidth < 480) { 
     child.sort(function(a, b) { 
      return b.getAttribute('order') - a.getAttribute('order'); 
     }).appendTo($('#parent')); 
    }

をウィンドウのサイズを変更することができますし、 rアンスクリプトは

<幅480場合、注文は

jsbin

出典

2017-03-23 13:38:21 Davy

幅の変更に基づいてフォームフィールドを並べ替える

答えて

関連する問題