Obrazy w jednej linii z tekstem na dole responsywne

Chciałbym zrobić w html'u i css obrazki które będą ustawione w jednej linii z tekstem pod każdym z nich

To fajnie. Masz moje pełne poparcie.

Dlaczego. Dopiero zaczynam z html'a i css'a i potrzebna jest mi pomoc osoby doświadczonej. Daje float:left ale mi nie działa.

no co ? wyświetlają mi się obrazy w jednej linii ale gdy zmieniam rozmiar okna to przeskakują do nowej linii

#deals {
	display: flex;
	flex-flow: row wrap;
}

.sale-item {
	display: flex;
	flex-flow: column;
	align-items: center;
}

.sale-item > img {
	order: -1;
	align-self: center;
}

<section id="deals">
	<section class="sale-item">
		<img src="../x1.png" alt="You get: a white computer with matching peripherals." />
		<p>HELLO</p>
	</section>
	<section class="sale-item">
		<img src="../x2.png" alt="You get: a white computer with matching peripherals." />
		<p>WORLD</p>
	</section>	
	<section class="sale-item">
		<img src="../x2.png" alt="You get: a white computer with matching peripherals." />
		<p>Insert Characters..........</p>
	</section>
</section>

Źródło: https://www.w3.org/TR/css-flexbox-1/

Ok dzięki. Sorry za taki post ale dopiero zaczynam. Dzięki i pozdro