カラーミーショップにBootstrap4を入れてレスポンシブ化する方法

<!-- CSSとViewport -->
<script>
var viewport = document.createElement('meta');
var bst = document.createElement('link');

viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
document.getElementsByTagName('head')[0].appendChild(viewport);

bst.setAttribute('rel', 'stylesheet');
bst.setAttribute('href', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
document.getElementsByTagName('head')[0].appendChild(bst);
</script>

<!-- javascriptファイル -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- viewport: レスポンシブに必要 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<!-- cssファイル -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- javascriptファイル -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

/* Bootstrap4のコンポーネントのまま、これだと上書きされる */
.card {
  border-radius: 0;
}

/* 独自のセレクタと合わせて使用、こっちなら上書きされない */
.item-recommend .card {
  border-radius: 0;
}

<!-- 左サイドバーの例 -->
<div id="header">
  <!-- ここにヘッダーコンテンツ -->
</div>
<div id="contents">
  <div class="container">
    <div class="row">
      <div id="main" class="col-12 col-lg-9 order-2">
        <!-- 下層ページの読み込み -->
        <{include file = $file_name}>
      </div>
      <div id="side" class="col-12 col-lg-3 order-1">
        <!-- ここにサイドバーコンテンツ -->
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <!-- ここにフッターコンテンツ -->
</div>

<!-- １カラムレイアウトの例 -->
<div id="header">
  <!-- ここにヘッダーコンテンツ -->
</div>
<div id="contents">
  <div class="container">
    <div id="main">
      <!-- 下層ページの読み込み -->
      <{include file = $file_name}>
    </div>
  </div>
</div>
<div id="footer">
  <!-- ここにフッターコンテンツ -->
</div>

<!-- 売れ筋商品を３カラムで表示する場合 -->
<div class="row">
  <{section name=num loop=$seller}>
  <div class="col-6 col-lg-4">
    <div class="card">
      <a href="<{$seller[num].link_url}>">
        <{if $seller[num].img_url != ""}>
          <img class="card-img-top" src="<{$seller[num].img_url}>" alt="<{$seller[num].name}>" />
        <{else}>
          <img class="card-img-top" src="https://img.shop-pro.jp/tmpl_img/73/noimage.png" alt="<{$seller[num].name}>" />
        <{/if}>
      </a>
      <div class="card-body">
        <h5 class="card-title">
          <a href="<{$seller[num].link_url}>"><{$seller[num].name}></a>
        </h5>
        <{if $seller[num].soldout_flg == false}>
          <p class="card-text"><{$seller[num].price}></p>
        <{else}>
          <p class="card-text">売り切れ</p>
        <{/if}>
      </div>
    </div>
  </div>
  <{/section}>
</div>