Grid 我需要显示4列，但在手机上显示2列

我有一个旧的CMS，意思是我需要一种创造性的方式来显示：

4列，每个单元格下面有一个链接图像和一个文本链接

在手机上，它将显示两列而不是四列

我真的很难找到一个简单的复制和粘贴解决方案-我有能力通过CMS添加CSS

谢谢

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row">
    <div class="col-md-3 col-sm-6"><img class="fr-dii fr-fin" draggable="false" src="https://via.placeholder.com/150x150"></div>

    <div class="col-md-3 col-sm-6"><img class="fr-dii fr-fin" draggable="false" src="https://via.placeholder.com/150x150"></div>

    <div class="col-md-3 col-sm-6"><img class="fr-dii fr-fin" draggable="false" src="https://via.placeholder.com/150x150"></div>

    <div class="col-md-3 col-sm-6"><img class="fr-dii fr-fin" draggable="false" src="https://via.placeholder.com/150x150"></div>
  </div>
</div>

---

您可以像以下示例那样更改CSS：

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

---

我希望您能给我您的4列代码：D

只需在您的

div的类中使用bootstrap和
col-md-3 col-sm-6

更新：
使用以下标记导入引导：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />


谢谢您的回复。如何使用或添加引导程序？我是将CSS添加到头部，还是有其他方法引用CSS？@Dav我已经更新了我的答案。请检查标记。@Dav如果满足您的问题，请检查注释作为答案。不幸的是，它没有堆叠在两列中。你能帮忙吗？我用代码更新了我的问题，