Html 如何在使用jQuery模板化的同时创建响应卡列？

我目前正在开发一款响应迅速的“智能家居”网络应用程序

为了使应用程序对更大的屏幕更具响应性，我想将房间和光卡分成两列——平板电脑（lg）为2列，台式机（xl）为3列

这是应用程序在xs an s显示器（移动）上的外观：

这就是我希望lg上的卡的外观：

我正在加载JSON文件中的所有数据，并为每个房间和灯光创建一张卡片，如下所示：

$.each(rooms_data, function (index, obj) {
template = 
    `
    <div class="card" style="background-color: #6e6e6e;">
        <div class="card-body" data-cardid="${obj.id}">
            ` + html_favourite_light + `
            <h6 class="card-title" style="color: #d1d1d1;">Room: ${obj.room}</h6>
            <h5 class="card-subtitle mb-2" style="color: #ffffff;">${obj.name}</h5>
            <p style="color: #ffffff;">Rating:` + html_rating_light + `</p style="color: #ffffff;">
            <select class="custom-select mb-3" id="sel1" style="background-color: #696969; border: none; color: #ffffff;">
                <option>${obj.select_1}</option>
                <option>${obj.select_2}</option>
                <option>${obj.select_3}</option>
                <option>${obj.select_4}</option>
            </select>
            ` + html_switch_light + `
            <h5 class="card-text pt-2" style="color: white;">Main Switch</h5>
        </div>
    </div>
    `
})

$。每个（房间\u数据、功能（索引、obj）{
模板=
`
`+html_收藏夹_灯+`
房间：${obj.Room}
${obj.name}
评级：`+html评级`+light+`

${obj.select_1}
${obj.select_2}
${obj.select_3}
${obj.select_4}
`+html_开关_灯+`
主开关
`
})

我曾经尝试过使用卡片组和卡片组，但是直到现在我还没有得到正确的结果