For non-modern browsers, we will use display: table for the container and display: table-cell for the inner elements as CSS fallback. We are going to use Modernizr to detect if the visitor's browser is modern (IE 10+, Firefox, Chrome, Safari) and if so, use Flexbox for displaying the Text-Image or Image-Text sections' content in 2 equal width columns (while ensuring that responsive behavior is taken care of). The Page template is going to check for the presence of at least one of these rows and if present, replace the standard Page content with full width section(s) that has/have been added in the backend. In this tutorial I share a custom Page template in Genesis to display a meta box in WordPress Page editor in which users can add any number of Hero, Text-Image and Image-Text rows (sections) in any order they want. One of the many features available in the Pro version is Flexible Content Field. Advanced Custom Fields Pro is an excellent plugin that does more than just let you create custom fields.
