css - Bootstrap3 div の位置と順序

Question

私は4つのdiv、ABCDを小さな画面で積み重ねました。ただし、中/大画面では、新しい行を作成するのではなく、4 番目の div が div A のすぐ下にある 3 列のレイアウトが必要です。これが私が xs と sm で得ているもので、完璧です:

しかし、ここに私がmd-lgで得たものがあります:

そして、これがmd-lgで欲しいものです:

別の投稿から借用したコードに基づいて作成した私のコードは次のとおりです。

<div class="container">
        <div class="col-md-4" style="background-color: lightblue">
            Content of A<br />line2 A<br />line3 A
        </div>
        <div class="col-md-4" style="background-color: lightcoral">
            Content of B<br />line2 B<br />line3 B<br />line4 B<br />line5 B
        </div>
        <div class="col-md-4" style="background-color: yellowgreen">
            Content of C - this has a variable number of lines<br />line2 C<br />line3 C<br />line4 C<br />line5 C<br />line6 C<br />line7 C<br />line8 C<br />line9 C
        </div>
        <div class="col-md-4" style="background-color: lightgreen">
            Content of D<br />line2 d<br />line3 d
        </div>          
    </div>

これまでの回答に対するコメント:

1. Phil のフィドルは近いですが、小さな画面ではセクション D を 2 番目のセクションとして使用します。
2. 実際のコンテンツにはかなりの量のコントロールとその背後にあるコードがあるため、2 つの別個のコンテナー (small と xs 用に 1 つ、md と lg 用に 1 つ) を使用したくありません。
3. user1667253 のソリューションは近いですが、セクション d の実際のコンテンツは、以下のように c のコンテンツよりも下にあります。