Как можно сверстать блок с использованием флексбокса, чтобы можно было изменять порядок его элементов?

Для сверстывания блока с использованием флексбокса и возможностью изменения порядка элементов, вы можете использовать свойство "order". Вот пример кода:

HTML:
```html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
```

CSS:
```css
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  height: 200px;
  background-color: gray;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

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

Чтобы установить высоту третьей картинке на 100% на десктопе, сохраняя возможность изменения порядка элементов, вы можете добавить дополнительные стили для третьего элемента:

CSS:
```css
.item:nth-child(3) {
  order: 3;
  height: 100%;
}
```

Однако, важно отметить, что установка высоты картинки на 100% может привести к искажению пропорций изображения, если его ширина не соответствует своей высоте.

* {
   box-sizing: border-box;
}

.container {
   width:800px;
   margin:0 auto;
   display: flex;
   justify-content: space-between;
}
.block {
   width: 100%;
   border: 1px solid black;
   padding: 20px;
   box-sizing: border-box;
}
.sub-block {
   margin-bottom: 20px;
}
.wrapper {
   flex-wrap: wrap;
}
.block {
   flex-grow: 1;
}