Почему не срабатывает переписание в flex-direction: column в React?

Question

[LaraG]

С начало flex-direction: row , потом column. Работает
Но центрирование в медиа-запросе не работает: justify-content: center; align-items: center;

import React from 'react';
import './Footer.css';

const Footer = () => {
	return (
		<div className='main-footer'>
			<div className='container'>
				<div className='row'>
					<div className='col'>	
						<p><i class="fas fa-dragon"></i> DragonBook</p>				
					</div>	
					<div className='col'>
						<p><i class="far fa-copyright"></i> 2020 All right reserved</p>
					</div>
					<div className='col'>
						<p>Fatto con <i class="fas fa-heart"></i> e <i class="fas fa-mug-hot"></i> per amatori dei <i class="fas fa-book"></i></p>
					</div>			
				</div>
			</div>
		</div>
	)
}
export default Footer;

.main-footer {
	color: white;
	background-color: #a5805d;
	padding: 50px 0;
}
.main-footer .row {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	overflow: hidden;
}
@media (max-width: 768px) {  
	.main-footer .row {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}

Answer 1

[ubbe_lodbroke]

Ну для начала поменяй class на className в тэках i. А что касается флексов, то у меня твой код работает исправно