基盤ブロックグリッドが小さく動作しません

Question

私は、基盤ブロックグリッドシステムを使用して一連のdivをページにロードしようとすると、1行あたりのdiv数を制限します。現在、何らかの理由で大画面から中画面に切り替えると1行あたりのdiv数が6から4に変わりますが、小さい画面に切り替えるとdivの数は変わりません。

小さな画面に切り替えると、下に表示される1つの小さいクラスがなぜ効果を発揮しないのか誰にも分かりますか？

ありがとうございます。

const MovieList = ({movies}) => { 
    if (movies.length === 0) { 
    return <p>We Could Not Find Anything</p>; 
    } 
    movies = movies.map((movie) => { 
    let className = "column column-block movie-box"; 
    let image; 
    if (movie.poster_path) { 
     image = <img src={`http://image.tmdb.org/t/p/w185/${movie.poster_path}`} />; 
    } else { 
     image = <img src={`http://www.planetvlog.com/wp-content/themes/betube/assets/images/watchmovies.png`} />; 
    } 

    return(
     <div key={movie.id} className={className}> 
     <p>{movie.title}</p> 
     {image} 
     </div> 
    ); 
    }); 
    return (
    <div className='row small-up-1 medium-up-4 large-up-6'> 
     {movies} 
    </div> 
); 
}; 

Answer 1

行と列のクラスを同じdivに適用することはできません。また、それはclassであり、classNameではありません。

<div class='row'> 
    <div class='small-up-1 medium-up-4 large-up-6'> 
     {movies} 
    </div> 
</div>