Ich habe bei der Demo 2 Breakpoints eingebaut:

1. Breakpoint bei 700px;
2. Breakpoint bei 530px

HTML

<article class="raster">

    <section class="intro">
        <h2>Überschrift</h2>
        <p>intro-Text…</p>
    </section>

    <section class="content">
        <h2>Überschrift</h2>
        <p>content-Text…</p>
    </section>

</article>

CSS

.raster {
    …
    display: grid;
    /* 3spaltiges Raster */
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1.5em;
}
.content {
    /* fängt bei Raster-Linie 2 an und überspannt 2 Rasterzellen */
    grid-column: 2 / span 2;
}

/* 1. Breakpoint */
@media screen and (max-width: 700px) {
    .raster {
        /* 2spaltiges Raster */
        grid-template-columns: repeat(2, 1fr);
    }
    .content {
        grid-column: 2;
    }
}

/* 2. Breakpoint */
@media screen and (max-width: 530px) {
    .raster {
        display: block;
    }
}

Demo

Artikel mit Eindrittel/Zweidrittel-Aufteilung – Ändert die Größe des Browser-Fensters und seht, was geschieht!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit in Brackets experimentieren…

CodePen

See the Pen artikel-eindrittel-zweidrittel-responsive by Matthias Edler-Golla (@megolla) on CodePen.