performances-item.js

import React from 'react';
import shortid from 'shortid';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Col from 'reactstrap/lib/Col';
import Row from 'reactstrap/lib/Row';
import {Link} from 'react-router';
import colWidths from '../../../helpers/col-widths';
import TextGroup from '../../../components/text-group/text-group';
import './performances-item.scss';

const renderMetaItem = item => (
	<Col widths={colWidths} key={`item-${shortid.generate()}`} xs="6" lg="4" xl="6">
		<TextGroup title={item.title} size="small">
			<span>{item.text}</span>
		</TextGroup>
	</Col>
);

const PerformancesItem = ({id, name, title, image, directors, upcomingDates, reverse, className}) => {
	const meta = [
		{
			title: 'Director',
			text: directors && directors.join(', ')
		},
		{
			title: 'Upcoming dates',
			text: `${upcomingDates.nearestDay}—${upcomingDates.furtherDay}`
		}
	];
	const MetaItems = meta.map(item => renderMetaItem(item));
	return (
		<article className={classNames('performances-item mb-1 mb-md-3 mb-xl-6', className)}>
			<Row className="performances-item-row">
				<Col
					widths={colWidths}
					xs="12"
					xl="6"
					className={classNames('order-2 d-flex flex-column performances-item-col', {
						'order-xl-1': reverse
					})}
				>
					<h3 className="h2 mt-1 mt-md-2 mb-md-2 mt-xl-0 text-uppercase performances-item-title">
						<Link className="performances-item-link" to={`/performances/${id}`}>
							{name}
						</Link>
					</h3>
					<p className="mb-0">{title}</p>
					<div className="spacer"/>
					<div className="my-1 my-md-2 mb-xl-0">
						<Row className="justify-content-between">
							{ MetaItems }
						</Row>
					</div>
				</Col>
				<Col
					widths={colWidths}
					xs="12"
					xl="6"
					className={classNames('order-1 performances-item-col', {
						'order-xl-2': reverse
					})}
				>
					{
            image &&
            <img className="img-fluid" src={image} alt=""/>
          }
				</Col>
			</Row>
		</article>
	);
};

PerformancesItem.propTypes = {
	id: PropTypes.number.isRequired,
	name: PropTypes.string.isRequired,
	title: PropTypes.string.isRequired,
	image: PropTypes.string,
	reverse: PropTypes.bool,
	className: PropTypes.string,
	directors: PropTypes.oneOfType([
		PropTypes.string,
		PropTypes.arrayOf(PropTypes.string)
	]).isRequired,
	upcomingDates: PropTypes.shape({
		nearestDay: PropTypes.string,
		furtherDay: PropTypes.string
	}).isRequired
};

PerformancesItem.defaultProps = {
	image: '',
	reverse: false,
	className: ''
};

export default PerformancesItem;

performances-item.scss

.performances-item {
  position: relative;
  width: 100%;
  max-width: 100%;

  &-title.h2 {
    @include media-breakpoint-down(xxl) {
      font-size: 2.6875rem; // 43px
    }

    @include media-breakpoint-down(lg) {
      font-size: 2rem; // 32px
    }

    @include media-breakpoint-down(sm) {
      font-size: .9375rem; // 15px
      line-height: 1.6;
    }
  }

  &-row {
    height: 100%;
  }

  &-col {
    position: static !important;
  }

  &-link {
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
  }
}

performances.js

import React from 'react';
import PropTypes from 'prop-types';
import shortid from 'shortid';
import Col from 'reactstrap/lib/Col';
import Row from 'reactstrap/lib/Row';
import colWidths from '../../helpers/col-widths';
import PerformancesItem from './perfomances-item/performances-item';

const renderItem = (item, reverse) => (
	<Col widths={colWidths} xs="12" lg="6" xl="12" key={`item-${shortid.generate()}`} className="d-flex">
		<PerformancesItem {...item} reverse={reverse}/>
	</Col>
);

const Performances = ({items}) => (
	<Row className="performances">
		{
      items &&
        items.map((item, index) => {
	const reverse = index % 2 === 1;
	return (
            renderItem(item, reverse)
	);
})
    }
	</Row>
);

Performances.propTypes = {
	items: PropTypes.arrayOf(PropTypes.shape)
};

Performances.defaultProps = {
	items: null
};

export default Performances;