Выравнивание сетки Bootsrap 4 для мобильного и большого экрана

Question

Я пытаюсь создать макет, в котором кнопки (col-md-4) вертикально выровнены по левому краю, а содержимое (col-md-8) - справа на больших устройствах.

Безинтервал отмечен красным.

Я ожидаю, что на мобильном устройстве оно будет работать как гармошка (Кнопка - Содержимое - Кнопка - Содержимое- Кнопка - Содержимое вертикально расположено).

Я использую Bootstrap 4, чтобы показать содержимое на основе выбора кнопки.

https://jsfiddle.net/gurx7eht/

<div class="accordion" id="forms-accordion">

  <div class="row">
    <div class="col-12 col-md-4 align-self-start">
      <button class="btn btn-outline-dark btn-lg quick-button" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Button 1</button>
    </div>
    <div class="col-12 col-md-8">
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#forms-accordion">
        <div class="">
          Content 1 .
          <br /> .
          <br /> .
          <br /> .
          <br />
        </div>
      </div>
    </div>

    <div class="col-12 col-md-4">
      <button class="btn btn-outline-dark btn-lg quick-button collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Button 2</button>
    </div>
    <div class="col-12 col-md-8">
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#forms-accordion">
        <div class="">
          Content 2 .
          <br /> .
          <br /> .
          <br /> .
          <br />
        </div>
      </div>
    </div>

    <div class="col-12 col-md-4">
      <button class="btn btn-outline-dark btn-lg quick-button collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Button 3</button>
    </div>
    <div class="col-12 col-md-8">
      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#forms-accordion">
        <div class="">
          Content 3 .
          <br /> .
          <br /> .
          <br /> .
          <br />
        </div>
      </div>
    </div>

    <div class="col-12 col-md-4">
      <button class="btn btn-outline-dark btn-lg quick-button" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">Button 4</button>
    </div>
    <div class="col-12 col-md-8">
      <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#forms-accordion">
        <div class="">
          Content 4 .
          <br /> .
          <br /> .
          <br /> .
          <br />
        </div>
      </div>
    </div>

    <div class="col-12 col-md-4">
      <button class="btn btn-outline-dark btn-lg quick-button collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">Button 5</button>
    </div>
    <div class="col-12 col-md-8">
      <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#forms-accordion">
        <div class="">
          Content 5 .
          <br /> .
          <br /> .
          <br /> .
          <br />
        </div>
      </div>
    </div>

    <div class="col-12 col-md-4">
      <button class="btn btn-outline-dark btn-lg quick-button collapsed" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">Button 6</button>
    </div>
    <div class="col-12 col-md-8">
      <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#forms-accordion">
        <div class="">
          Content 6 .
          <br /> .
          <br /> .
          <br /> .
          <br />
        </div>
      </div>
    </div>

  </div>

</div>

Приведенный выше код хорошо работает на мобильном устройстве, но между кнопками (высота содержимого) есть интервал, и кнопки перемещаются при выборе кнопки.Эту проблему можно решить, поместив все кнопки под (col-md-4) и содержимое под (col-md-8), но это нарушает мобильную раскладку.

Как заставить это работать как на мобильных, так и на больших экранах, как ожидалось, без дублирования контента?