я есть эта структура HTML:

<div class="container">
   <div class="row">
      <div class="col-lg-9 description"></div>
      <div class="col-lg-3 sidebar"></div>
      <div class="col-lg-9 comments"></div>
   </div>
</div>

Окончательный эффект таков:Мне нужна эта структура HTML, потому что, когда у меня меньшие области просмотра и Bootstrap переключается в режим с 1 столбцом, мне нужно, чтобы столбец боковой панели проходил между столбцами описания и комментариями (где на самом деле есть пустое пространство).

Проблема в том, что я хочу избежать пустого места, когда шаблон не находится в «мобильном режиме».

Я пробовал много способов, но я не могу этого достичь, кто-то может мне помочь?

РЕДАКТИРОВАТЬ

Я попробовал так:

<div class="container">
   <div class="row">
      <div class="col-lg-9">
         <div class="description"></div>
         <div class="comments"></div>
      </div>
      <div class="col-lg-3 sidebar"></div>
   </div>
</div>

И попытался изменить порядок с помощью css "order", но не сработало (единственное, что он позволяет мне сделать, это поместить боковую панель в начале страницы, но это не то, что я хочу).