<select class="product-sort-mode" name="product-sort-mode" id="" onChange="newSort($(this));" class="select-custom">
<option <?=($_GET["product-sort-mode"]=="popular")?"selected":""?> value="popular"><?=GetMessage("PAGE_SORT_BY_POPULAR")?></option>
<option <?=(!isset($_GET["product-sort-mode"]) || $_GET["product-sort-mode"]=="new")?"selected":""?> value="new"><?=GetMessage("PAGE_SORT_BY_NEW")?></option>
<option <?=($_GET["product-sort-mode"]=="price_asc")?"selected":""?> value="price_asc"><?=GetMessage("PAGE_SORT_BY_PRICE_ASC")?></option>
<option <?=($_GET["product-sort-mode"]=="price_desc")?"selected":""?> value="price_desc"><?=GetMessage("PAGE_SORT_BY_PRICE_DESC")?></option>
</select>.product-sort-mode{
border:none;
color:#a160b9;
font-size:24px;
font-family: 'Open Sans', sans-serif;
}<div class="container-fluid">
<div class="row">
<div class="col-6">первый ваш блок</div>
<div class="col-6">второй ваш блок</div>
<div class="col-6">трейти ваш блок</div>
<div class="col-6">четвертный ваш блок</div>
</div>
</div><div class="col-12> надо было вынести за пределы шаблона компонента. Так как если разместить этот див внутри компонента, нарушалась структура сетки boostrap из-за того, что компонет битрикса добавлял свою собственную обёртку. И получалось: <div class="container-fluid">
<div class="row">
<div class="bitrix-wrapper"> <!-- Именно эта обёртка и приводила к таким последствиям -->
<div class="col-12"></div>
</div>
</div>
</div><div class="col-12"></div> за пределы шаблона компонента, и всё заработало 
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:5000,
autoplayHoverPause:true,
nav:true,
responsive:{
320:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
});<div class="row" id="row-1">....</div>
#row-1{ height: 200px; };