Бутстрап, показывающий как один столбец вместо двух

Question

Название в значительной степени говорит обо всем. Я ожидаю увидеть две колонки, чего не происходит. Буду очень признателен за любую помощь. Код можно найти здесь: https://codepen.io/jar5/pen/NWWXBro

Я много гуглил и проверял каждое решение, которое смог найти.

Я сократил некоторые элементы в списке, чтобы сэкономить место, но вы можете увидеть полный код по ссылке на коде.

<div>
  <div id="question" class="col-6">
    <h2>Question 1:</h2>
    <p>Here's a question with choices</p>
    <ul class="list-group">
      <label for="0">
        <li class="list-group-item">
          <input id="0" type="radio" name="answer" value="0">Choice 1
        </li>
      </label>
    </ul>
  </div>
  <div class="col-3 infobox">
    <h4>This should be on the next column</h4>
  </div>
</div>

Нет сообщений об ошибках. <h4> внизу должно отображаться во втором столбце.

Answer 1

Вам необходимо удалить style="display: block;" из <div class="row" id="quiz">. Класс row имеет свойство flex в начальной загрузке 4, что позволяет отображать дочерние элементы с классом col- в столбцах, поэтому ваш код должен выглядеть примерно так:

<div class="row" id="quiz">
  <div id="question" class="col-6">...</div>
  <div class="col-3 infobox">...</div>
</div>