Как сверстать такой блок на флексах с изменением порядка его элементов?

Для сверстывания блока на флексах с возможностью изменять порядок элементов следует использовать свойство CSS - order.

Для начала, создадим контейнер, в котором будут располагаться элементы блока. Для этого обернем элементы в блок <div> или используем другой подходящий контейнерный элемент.

Ниже представлен пример кода HTML для контейнера и его дочерних элементов:

<div class="container">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
</div>

Добавим стили для созданного контейнера и его дочерних элементов с помощью CSS. Укажем, что контейнер будет использовать флексы, а элементы будут иметь порядковый номер по умолчанию:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 0 1 150px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
  text-align: center;
  line-height: 100px;
}

Теперь рассмотрим изменение порядка элементов внутри контейнера с помощью свойства order. Для этого присвоим каждому элементу уникальное значение order. По умолчанию, все элементы имеют значение 0. Чем больше значение order, тем элемент будет ближе к концу контейнера.

Ниже приведен код CSS с добавлением значения order для каждого элемента блока:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 0 1 150px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
  text-align: center;
  line-height: 100px;
}

.item:nth-child(1) {
  order: 2;
}

.item:nth-child(2) {
  order: 3;
}

.item:nth-child(3) {
  order: 1;
}

В этом примере, элементы блока будут располагаться следующим образом:
- Элемент 1 будет расположен первым, так как он имеет значение order: 2.
- Элемент 2 будет расположен вторым, так как он имеет значение order: 3.
- Элемент 3 будет расположен третьим, так как он имеет значение order: 1.

Таким образом, при использовании свойства order можно легко изменять порядок элементов в блоке на флексах, достигая нужного макета или дизайна.