Невозможно выполнить цикл по горизонтали, используя bootstrap4 vuejs

Question

При переходе от bootstrap3 к bootstrap4 я столкнулся с небольшой проблемой, мой код работает в bootstrap3, но теперь, когда я хочу использовать bootstrap4, сетка столбцов зацикливается по вертикали.Я не уверен, если это vuejs конкретно связано с тем, как я зацикливаюсь или загрузиться.

<template>
  <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h2 class="page-title">Notes</h2>
        </div>    
      </div>

    <div class="row">
      <div class="box box-success">
        <div class="box-body">
          <div class="col-md-4 col-sm-6">

            <div class="single-note add-note" v-bind:class="[newNote.color]">

              <div class="colors" :class="{openDivs: currentID == -1}">
                <div
                  @click="noteColor = 'blue'"
                  class="circle blue"
                  :class="{selected: newNote.color == 'blue'}"
                ></div>

                </div> 
              </div> 

            </div> 
          <!--Start The Loop-->
          <single-note :all-notes="theNotes"></single-note>
        </div>
      </div>
    </div>
  </div>

это часть кода для одной заметки

<template>
  <section>
    <div class="col-md-4 col-sm-6" v-for="(oneNote, i) in allNotes" :key="oneNote.i">
      <div
        v-if="oneNote.text.includes(searchKey)"
        class="single-note"
        v-bind:class="[oneNote.color]"
      >
        <p
          v-else
          :class="{expand: idToExpand == i, isDone: oneNote.completed}"
          v-html="modifiedText(i)"
        ></p>

        <div class="meta">
          <span v-if="edit && editId == i" @click="updateNote(i, oneNote)">

        </div>

        </div>
        <div class="copied" :class="{openDivs: idToCopy == i}">link is copied !</div>
      </div>
    </div>
  </section>
</template>