Дети во флексбоксе не реагируют на порядок и выравниваются ⇐ CSS

[Anonymous]

Я пытаюсь создать адаптивный островной ландшафт, накладывая три элемента: я хотел бы разместить пальму на песчаном острове слева и расположить текст так, чтобы он плавал в пространстве справа от дерева, но над песком.
Я пытался создать этот макет с помощью флексбокса, но не смог заставить свои изображения реагировать ни на команду заказа, ни на команду align-self. В настоящее время меня не беспокоит внешний вид макета, я просто пытаюсь изучить HTML/CSS и хочу понять, почему элементы ведут себя не так, как ожидалось. Гибкий блок временно выделен черным контуром, просто для удобства визуализации, пока он находится в работе.
Ссылка на сайт: https://capillary.neocities.org/home

Код: Выделить всё

[img]isle/wordart.png[/img]

[img]isle/palmtree.gif[/img]

[img]isle/sand.png[/img]

Код: Выделить всё

.flexboxtitle {
width: 1000px;
height: 500px;
border: 1px solid #000000;
display: flex;
flex-flow: column wrap;
justify-content: start;
align-items: center;
}

.paradise img {
order: 3;
flex-basis: auto;
align-self: end;
max-width: 200px;
z-index:5;
}

.sand img{
order: 1;
flex-basis: auto;
max-width: 250px;
z-index:3;
}

.glitterpalm img{
order: 2;
flex-basis: auto;
height: 200px;
z-index:4;
}

Спасибо!!

Подробнее здесь: https://stackoverflow.com/questions/787 ... align-self