начальная / двухтактная колонка с мобильным режимом различной высоты против режима рабочего стола

Question

Мне нужна помощь с функцией Push / Pull столбцы Bootstrap.

У меня есть 3 различных раздела, которые все могут иметь переменной высоты .

В мобильном режиме,они должны отображаться вертикально от 1 до 3. Это легко сделать.

Проблема связана с макетом, который я хочу получить в режиме рабочего стола.Мне нужно для рабочего стола, чтобы отобразить их в 2 отдельных столбцах (50% каждый с col-md-6).С левой стороны я хочу разделы 2, с правой стороны я хочу разделы 1-3.

Мобильный:

Раздел 1

Раздел 2

Раздел 3

Рабочий стол:

Раздел 2 Раздел 1

Ничего .. Раздел 3

Моя проблема в том, что при высоте раздела 2выше, чем высота секции 1 , сама секция 3 располагается ниже НИЖЕ секции 2 (даже если отображается справа).Мне нужно, чтобы Секция 3 находилась чуть ниже Секции 1, независимо от высоты Секции 2.

Спасибо за любую помощь, которую вы можете оказать.

Вот код:

<div class="row">

    <div class="col-md-6 col-md-push-6">
        Section 1
    </div>

    <div class="col-md-6 col-md-pull-6">
        Section 2
        <br />
        is taller than Section 1 with this 2nd line
    </div>

    <div class="col-md-6 col-md-push-6">
        Section 3 doesn't start right under Section 1
    </div>

</div>