Form İçerisindeki label ile input'un Yerini(Sırasını) Nasıl Değiştirebilirim?

label'dan önce input'ın gelmesini istiyorum ancak HTMl'e müdahale edemiyorum. Bu nedenle Javascript ile yapabilir miyim acaba? Değişecek input'ların type="text" olması gerekiyor, diğerleri kalacak.

Not: CSS ile olmuyor, amaç HTML yapısını değiştirmek CSS ile alta almak değil.

Yapı şu şekilde:

<form>
    <label></label>
    <input></input>
</form>

Şu şekilde olması gerekiyor:

<form>
    <input></input>
    <label></label>
</form>

form {
display:flex;
}

form label {
order:2;
}

Hocam CSS ile de olur da amaç HTML yapısını değiştirmek zira yapmaya çalıştığım şey input:focus+label şeklinde CSS yazma ihtiyacı. HTML'de label'ı input'un altına almayınca bu CSS'i kullanamıyorum.

$('form input').focus(function() {
    $(this).prev('label').addClass('active');
});

label.active{
    color:#000;
}

Çalıştıramadım hocam, neden bilmiyorum takıldım kaldım çok fazla zaman kaybettim öğrenmeye çalışırken bir türlü de işin içinden çıkamadım. Aklıma farklı bir yol geldi, input'un üstündeki laber'ı altına alamıyorsak input ID'si username olanın altına <label>Kullanıcı adı ya da e-posta adresi</label> ekle şeklinde bir kodu sayfa yüklendiğinde çalıştırabilir miyiz? Böyle de amacıma ulaşmış olacağım.