Bootstrap 4 小型设备上的引导/flexbox如何在1列中显示数据

在我的vue/cli 4/Bootstrap 4.3应用程序中，当我需要在小型设备上以1列显示数据时，我会使用next样式（在大型设备上以2列显示数据）

它适用于静态文本，如：

<div class="block_2columns_md m-0">

    <div class=" p-3">
        111
    </div>

    <div class=" p-3">
        222
    </div>

</div> <!-- <div class="block_2columns_md m-0"> -->

111
222

但由于我的数据显示在圆圈中，我尝试如下：

<div v-for="(nextActiveTask, index) in tasks" :key="nextActiveTask.id">

    <div v-if="index % 2 === 0" :class="( index % 2 === 0 ? 'block_2columns_md' : '') + ' '" >
        <div class=" p-3">1:1 : index::{{ index }}</div>
    </div>

</div>

<div v-for="(nextActiveTask, index) in tasks" :key="nextActiveTask.id">

    <div v-if="index % 2 === 0" :class="( index % 2 === 0 ? 'block_2columns_md' : '') + ' '" >
        <div class=" p-3">1:1 : index::{{ index }}</div>

    <template v-if="index % 2 !== 0"  >
        <div class=" p-3" style="border: 2px dotted yellow ">1:1 : index::{{ index }}</div>
    </template>

</div> <!-- <div v-for="nextActiveTask in tasks" -->

1:1:索引：：{{index}

但是结果是无效的，比如说任务中有4行，我看到索引为0,2的div，但是丢失了1,3

哪种方法有效

已修改#2: 我使用flexbox类进行布局，因此我尝试：

<div v-for="(nextActiveTask, index) in tasks" :key="nextActiveTask.id">

    <div v-if="index % 2 === 0" :class="( index % 2 === 0 ? 'block_2columns_md' : '') + ' '" >
        <div class=" p-3">1:1 : index::{{ index }}</div>
    </div>

</div>

<div v-for="(nextActiveTask, index) in tasks" :key="nextActiveTask.id">

    <div v-if="index % 2 === 0" :class="( index % 2 === 0 ? 'block_2columns_md' : '') + ' '" >
        <div class=" p-3">1:1 : index::{{ index }}</div>

    <template v-if="index % 2 !== 0"  >
        <div class=" p-3" style="border: 2px dotted yellow ">1:1 : index::{{ index }}</div>
    </template>

</div> <!-- <div v-for="nextActiveTask in tasks" -->

1:1:索引：：{{index}
1:1:索引：：{{index}

但它给出了无效的结果。正确程度如何？

就是这样：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 ">
            111
        </div>

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 ">
            222
        </div>
    </div>
</div>

111
222

---

检查：

请看修改后的内容#2查看其工作权限下方的答案？？？