Now, it behaves like this:

The code is relatively straightforward. The HTML for the calendar looks like this:

<div class="calendars">
    <div class="calendar">
        <div class="calendar-year">2018</div>
        <div class="calendar-month">January</div>
        <div class="calendar-month">February</div>
        <div class="calendar-month">March</div>
        <div class="calendar-month">April</div>
        <div class="calendar-month">May<br></div>
        <div class="calendar-month">June</div>
        <div class="calendar-month">July</div>
        <div class="calendar-month">August</div>
        <div class="calendar-month">September</div>
        <div class="calendar-month">October</div>
        <div class="calendar-month">November</div>
        <div class="calendar-month">December</div>
    </div>

    <div class="calendar">
        <div class="calendar-year">2017</div>
        <div class="calendar-month">January</div>
        <div class="calendar-month">February</div>
                ...

Repeat as many times as needed.

The CSS is slightly more tricky, but mercifully short:

The wrapper which holds all the calendars uses flex-wrap. This means there's no need to set explicit breakpoints - if there's no horizontal space, the calendar will move to the next row.

.calendars {
    display: flex;
    flex-wrap: wrap;
}

Each individual calendar item is a grid with three column layout:

.calendar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: .5em;
}

The "Year" at the top spans the first three columns. I find the grid-column-... syntax confusing!

.calendar-year {
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
    outline: 1px black solid;
}

Finally, each individual month has a bit of internal padding and text formatting:

.calendar-month {
    text-align: center;
    padding: .25em;
    outline: 1px black solid;
}

I've used a basic black outline. Obviously, you can add whatever fancy CSS you like to make them look prettier.

I said:

The BBC's mobile site is fairly responsive. If you view it on different sized phones and tablets it adapts quite well. But it is an entirely separate site from the main BBC news site. The BBC are doing device detection and redirecting mobile users. It's not a bad strategy per se - but it is not best practice

Clicking on a link on the BBC's front page today, lead to this "responsive" experience.

A completely blank page. The full-fat site contains a clever chart.

Ideally, your mobile site should contain the same content as your main site. It's not a huge sin if it can't (for technical reasons) but you need to ensure that your CMS detects pages which are unsuitable for mobile and ensures that links towards them are removed.

Otherwise, you end up in this silly situation where mobile users are served content which you simply can't show them.

Of course, the reverse can be just as bad.

Come on BBC, sort it out!