<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS Grid</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css-grid.css" />
</head>

<body>
    <div class="container">
        <div class="promo-message">
            <p>Message</p>
        </div>
        <div class="hidden-xs promo-image">
            <p>Image</p>
        </div>
        <div class="promo-ctas">
            <p>CTAs</p>
        </div>
    </div>
</body>

</html>
.container{
    display: grid;
    grid-template-columns: 33.3%;
    grid-template-rows: 1fr;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    text-align:center;
    grid-template-areas: "promoMessage promoImage promoCTAs";
}

.promo-message { 
    background:blue;
    grid-area: promoMessage; 
}

.promo-image { 
    background:lightblue;
    grid-area: promoImage; 
}

.promo-ctas{
    background:turquoise;
    grid-area: promoCTAs;
}

@media(max-width:992px){
    .container{
        grid-template-columns: minmax(50%, 50%);
        grid-template-areas: 
          "promoImage promoMessage promoMessage"
          "promoImage promoCTAs promoCTAs";
    }
}

@media(max-width:767px){
    .hidden-xs{
        display:none;
    }

    .container{
        display:flex;
        flex-direction: column;
    }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.