배지 페이지에서 신뢰도 수준 순으로 전시

제품 지원
3

CSS를 사용하여 다음과 같이 처리할 수 있습니다.

.badge-card.betauser {
    order: -1;
}

현재 배지 페이지 레이아웃이 flexbox로 구성되어 있기 때문에, 순서를 변경하면 화면 폭에 따라 일부 여백(margin)을 조정해야 할 수도 있습니다.

.badge-card.betauser {
    order: -1;
  @media screen and (max-width: 850px) {
    margin-right: 1.63%
  }
}

.badge-card.betatester {
  @media screen and (max-width: 850px) {
    margin-right: 0;
  }
}

올해 말 IE11 지원이 종료되면(그때부터는 flexbox 대신 grid로 레이아웃을 구성할 수 있기 때문에) 여백을 세심하게 조정해야 하는 번거로움은 사라질 것입니다.