How to display infoblock elements in columns, but at the same time, so that they are bootstrap (so that they do not run into each other)???

Question

1C-Bitrix

Hello. There is a template modified template news.list, where the output of elements in columns is registered. The problem is that in the mobile version the display is incorrect, namely, the elements run into each other, but it is necessary that they line up in a list. How to do this?
Template.php file of the template:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div class="news-list">
<?if($arParams["DISPLAY_TOP_PAGER"]):?>
  <?=$arResult["NAV_STRING"]?><br />
<?endif;?>
<?foreach(array_chunk($arResult["ITEMS"], $arParams["COLS_NUMBER"]) as $arPartItems):?>
 <div class="row">
 	<?foreach($arPartItems as $arItem):?>
   	<?
      $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
      $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
    ?>
 		<div class="item" id="<?=$this->GetEditAreaId($arItem['ID']);?>" style="width:<?=floor(100/intval($arParams["COLS_NUMBER"]));?>%;">
 		 <?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
      <?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
        <a><img
            class="preview_picture"
            border="0"
            src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"
            width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>"
            height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>"
            alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>"
            title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"
            /></a>
      <?else:?>
        <img
          class="preview_picture"
          border="0"
          src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"
          width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>"
          height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>"
          alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>"
          title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"
          />
      <?endif;?>
    <?endif?>
    <?if($arParams["DISPLAY_DATE"]!="N" && $arItem["DISPLAY_ACTIVE_FROM"]):?>
      <span class="news-date-time"><?echo $arItem["DISPLAY_ACTIVE_FROM"]?></span>
    <?endif?>
    <?if($arParams["DISPLAY_NAME"]!="N" && $arItem["NAME"]):?>
      <?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
        <a><b><?echo $arItem["NAME"]?></b></a><br />
      <?else:?>
        <b><?echo $arItem["NAME"]?></b><br />
      <?endif;?>
    <?endif;?>
    <?if($arParams["DISPLAY_PREVIEW_TEXT"]!="N" && $arItem["PREVIEW_TEXT"]):?>
      <?echo $arItem["PREVIEW_TEXT"];?>
    <?endif;?>
    <?foreach($arItem["FIELDS"] as $code=>$value):?>
      <small>
      <?=GetMessage("IBLOCK_FIELD_".$code)?>:&nbsp;<?=$value;?>
      </small><br />
    <?endforeach;?>
    <?foreach($arItem["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
      <small>
      <?=$arProperty["NAME"]?>:&nbsp;
      <?if(is_array($arProperty["DISPLAY_VALUE"])):?>
        <?=implode("&nbsp;/&nbsp;", $arProperty["DISPLAY_VALUE"]);?>
      <?else:?>
        <?=$arProperty["DISPLAY_VALUE"];?>
      <?endif?>
      </small><br />
    <?endforeach;?>
 		</div> 	
 	<?endforeach;?> 	
 </div>
 <br>
<?endforeach;?>
</div>

If suddenly some files are still needed - write

Answer 1

<div class="item" id="<?=$this->GetEditAreaId($arItem['ID']);?>" style="width:<?=floor(100/intval($arParams["COLS_NUMBER"]));?>%;">

What is this?
Write like in bootstrap

<div class="item col-md-<?=$arParams["COLS_NUMBER"]?>"