Какая конструкция помогает реализовать перестройку элементов в CSS?

Перестроить элементы на разных экранах помогают медиазапросы вместе с Flexbox или Grid (и container queries для компонентов).

Grid с областями

.page {
  display: grid;
  grid-template-areas: "header" "main" "sidebar";
}
@media (min-width: 900px) {
  .page {
    grid-template-columns: 1fr 280px;
    grid-template-areas: "header header" "main sidebar";
  }
}

Меняя grid-template-areas, можно полностью перестроить макет, не трогая HTML.

Flexbox

.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 250px; }

Карточки сами переносятся на новую строку, когда не помещаются.

Без медиазапросов

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

Container queries

Компонент перестраивается по ширине своего контейнера: @container (min-width: 400px) { … }.

Коротко для собеседования

Медиазапросы + Grid (grid-template-areas) или Flexbox (flex-wrap); для компонентов — container queries.

Подробнее: MDN — Адаптивный дизайн