Why doesn't rewrite to flex-direction: column work in React?

Question

Flexbox

Starting with flex-direction: row , then column. Works
But centering in media query doesn't work: 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

Well, for starters, change class to className in i. As for flex, your code works fine for me