Bootstrap 4 использует 5 различных классов .col, чтобы указать, сколько столбцов должен занимать каждый элемент в различных окнах просмотра:
.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)
Принимая во внимание, что Bootstrap имеет 12 столбцов, вам просто нужно разделить 12 на желаемое количество столбцов в каждой точке останова, чтобы получить нужную цель .col. Например, если вы хотите 2 столбца для средних устройств, вы поделите 12 на 2, чтобы получить 6, что даст вам класс .col-md-6.
Предполагая, что вам нужно 4 столбца на больших и очень больших устройствах, 2 столбца на средних устройствах и 1 столбец на малых и очень маленьких устройствах, вы захотите использовать следующие классы:
.col-12
.col-sm-12
.col-md-6
.col-lg-3
.col-xl-3
Это можно увидеть в следующем:
Это приведет к тому, что элементы «защелкиваются», занимая 4 столбца, и занимают только 2 столбца, когда вы перетаскиваете область просмотра, чтобы быть уже.
PS: Также обратите внимание, что у вас есть два мошеннических </div> в вашем примере, которые могут испортить отображение, если они существуют в вашем реальном коде.