Сортировка отображаемой информации на странице

Question

Я пробовал свой мозг в течение недели, и мне нужны другие мозги развития для помощи. Я не ищу код, просто обратная связь с направлением.

У нас есть страницы, в которых есть 10 или около того групп с 10 или около того полей внутри каждой группы. Наше требование состоит в том, чтобы иметь возможность для пользователя сортировать группы и сортировать поля внутри каждой группы, а также скрывать группы и/или поля, сохраняя при этом совместимость с мобильными устройствами. Я мог бы просто подумать об этом, но это требование похоже на кошмар для обслуживания.

Сегодня это демонстрационный пример в ASP.NET/C#, но мы отправимся на Java в ближайшем будущем. Я пытаюсь понять, как это будет работать на стороне HTML5/CSS3, вне зависимости от используемой технологии. Я развиваюсь уже 25 лет, и это удручает мой разум. Любое направление было бы высоко оценено.

Answer 1

Простейшим я могу придумать, чтобы использовать flexbox и его свойство order

.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>