column.css

.card-img,
.card-img-overlay {
  cursor: pointer;
}

.card-img-overlay {
  display: flex;
  align-items: center;
}

@media (min-width: 544px) {
  .card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
  }
}

Column.jsx

require('./css/column.css');
var classNames = require('classnames');
var React = require('react');

var Column = React.createClass({

  getInitialState: function() {
    return {
      showContext: false
    };
  },

  render: function() {
    var showContext = this.state.showContext;
    var data = this.props.data;

    return (
      <div className="card card-shadow card-column m-b-2">
        <div className={classNames('card-img', 'p-a-2', {'invisible': !showContext})}
             ref="content" onClick={this.handleContentClick}>
          <p>
            {data.contents}
          </p>
        </div>
        <div className={classNames('card-img-overlay', 'p-a-3', {'invisible': showContext})}
          ref="overlay" onClick={this.handleOverlayClick}>
          <p className="f-s-26">
            {data.title}
          </p>
        </div>
      </div>
    )
  },

  handleOverlayClick: function() {
    this.setState({
      showContext: true
    });
  },

  handleContentClick: function() {
    this.setState({
      showContext: false
    });
  }
});

module.exports = Column;

bootstrap v4
react