Как для рендеринга динамических карт используйте response-flexbox-grid

Question

В настоящее время мне трудно использовать React-FlexBox-Grid для рендеринга элементов динамических карт, у меня нет идей для этой проблемы, извините, потому что я младший, и я привыкла реагировать. Это мой жесткий код

import React, {Component} from 'react';
import './css/style.css';
import { Grid, Row, Col } from 'react-flexbox-grid';
import {Card, CardActions, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';

class ListCourse extends Component {
    render(){
        return(
            <Grid>
                <Row className='.class_1'>
                    <Col xs={3}>
                      <Card>
                        <CardMedia
                            overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}
                            >
                            <img src="http://media.doisongphapluat.com/476/2016/10/27/hinh-anh-halloween-de-thuong1.jpg" alt="" />
                        </CardMedia>
                        <CardTitle title="Card title" subtitle="Card subtitle" />
                        <CardText>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
                            Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
                            Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
                        </CardText>
                        <CardActions>
                            <FlatButton label="Action1" />
                            <FlatButton label="Action2" />
                        </CardActions>
                      </Card>
                    </Col>

                    <Col xs={3}>
                      <Card>

                        <CardMedia
                            overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}
                            >
                            <img src="http://media.doisongphapluat.com/476/2016/10/27/hinh-anh-halloween-de-thuong1.jpg" alt="" />
                        </CardMedia>
                        <CardTitle title="Card title" subtitle="Card subtitle" />
                        <CardText>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
                            Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
                            Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
                        </CardText>
                        <CardActions>
                            <FlatButton label="Action1" />
                            <FlatButton label="Action2" />
                        </CardActions>
                      </Card>
                    </Col>

                    <Col xs={3}>
                      <Card>

                        <CardMedia
                            overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}
                            >
                            <img src="http://media.doisongphapluat.com/476/2016/10/27/hinh-anh-halloween-de-thuong1.jpg" alt="" />
                        </CardMedia>
                        <CardTitle title="Card title" subtitle="Card subtitle" />
                        <CardText>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
                            Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
                            Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
                        </CardText>
                        <CardActions>
                            <FlatButton label="Action1" />
                            <FlatButton label="Action2" />
                        </CardActions>
                      </Card>
                    </Col>

                    <Col xs={3}>
                      <Card>
                        <CardMedia
                            overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}
                            >
                            <img src="http://media.doisongphapluat.com/476/2016/10/27/hinh-anh-halloween-de-thuong1.jpg" alt="" />
                        </CardMedia>
                        <CardTitle title="Card title" subtitle="Card subtitle" />
                        <CardText>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
                            Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
                            Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
                        </CardText>
                        <CardActions>
                            <FlatButton label="Action1" />
                            <FlatButton label="Action2" />
                        </CardActions>
                      </Card>
                    </Col>
                </Row>


            </Grid>
        );
    }
}
export default ListCourse;