Sortierung der angezeigten Informationen auf einer Seite

Question

Ich habe mich eine Woche lang damit beschäftigt und brauche andere Entwicklungshelfer um Hilfe. Ich suche keinen Code, nur ein Feedback mit der Richtung.

Wir haben Seiten, die eine 10 oder so Gruppen haben, mit 10 oder so Feldern innerhalb jeder Gruppe. Unsere Anforderung besteht darin, dass ein Benutzer in der Lage ist, Gruppen zu sortieren und Felder innerhalb jeder Gruppe zu sortieren sowie Gruppen und/oder Felder auszublenden, während die Kompatibilität mit diesen Mobiltelefonen gewährleistet bleibt. Vielleicht bin ich gerade dabei, darüber nachzudenken, aber diese Anforderung scheint ein Wartungs-Albtraum zu sein.

Heute ist dies eine Demo in ASP.NET/C#, aber in naher Zukunft werden wir nach Java gehen. Ich versuche herauszufinden, wie dies auf der HTML5/CSS3-Seite funktionieren würde, unabhängig von der Backend-Technologie. Ich entwickle mich seit 25 Jahren und das ist verrückt. Jede Richtung würde sehr geschätzt werden.

Answer 1

Die einfachste ich mit oben kommen kann ist flexbox und seine order Eigenschaft zu verwenden

.container, 
 
.groups { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px dotted gray; 
 
} 
 
.groups:nth-child(2) { 
 
    order: -1;    /* default is 0 */ 
 
    background: lightgray; 
 
} 
 
.groups:nth-child(2) .fields:nth-child(3) { 
 
    order: 1;    /* default is 0 */ 
 
    background: lightblue; 
 
} 
 
.groups:nth-child(1) .fields:nth-child(2) { 
 
    order: -1;    /* default is 0 */ 
 
    background: lightgreen; 
 
} 
 
.groups:nth-child(3) .fields:nth-child(2), 
 
.groups:nth-child(3) .fields:nth-child(3) { 
 
    display: none; 
 
}

<div class="container"> 
 
    <div class="groups"> 
 
    <div class="fields">A 1</div> 
 
    <div class="fields">A 2</div> 
 
    <div class="fields">A 3</div> 
 
    <div class="fields">A 4</div> 
 
    </div> 
 
    <div class="groups"> 
 
    <div class="fields">B 1</div> 
 
    <div class="fields">B 2</div> 
 
    <div class="fields">B 3</div> 
 
    <div class="fields">B 4</div> 
 
    </div> 
 
    <div class="groups"> 
 
    <div class="fields">C 1</div> 
 
    <div class="fields">C 2</div> 
 
    <div class="fields">C 3</div> 
 
    <div class="fields">C 4</div> 
 
    </div> 
 
</div>