html - Bootstrap功能列表布局

我有带有功能列表内容框的布局，在桌面版本中看起来还不错，但是在较小版本中，我的键盘/手机有问题，带有图标的四个单词刚刚坏了。我认为这不是此内容框布局的最佳解决方案，什么是最好，最简洁的方法？
对于台式机和移动设备，我需要相同的外观。

预期结果：

.container {
  padding: 0;
}

  padding: 71px 0px 0px 0px;
  img {
    margin-bottom: 6px;
  }
  h2 {
    font-size: 18px;
    font-weight: bold;
    color: #363636;
    text-align: center;
    margin-bottom: 7px;
  }
  p {
    font-size: 16px;
    line-height: normal;
    color: #363636;
  }
  a {
    font-size: 14px;
    color: #333333;
    border-bottom: 1px solid #ef5300;
    text-decoration: none;
    padding-bottom: 2px;
  }
  .col-lg-12 {
    padding: 25px 20px 20px 20px;
    border-radius: 4px;
    border: solid 1px #e9e9e9;
  }

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

  <title>My title</title>
</head>

<body>
  <section id="services">
    <div class="container">
      <div class="row">
        <div class="col-lg-4">
          <div class="col-lg-12 h-100">
            <img src="icons/furniture.png" class="mx-auto d-block">
            <h2>Nestandartinių baldų gamyba</h2>

            <div class="row">
              <div class="col-lg-7">
                <span class="far fa-check-square"></span>Privačios paskirties
                <span class="far fa-check-square"></span>Viešosios paskirties
              </div>
              <div class="col-lg-5">
                <span class="far fa-check-square"></span>Korpusiniai
                <span class="far fa-check-square"></span>Minkšti
              </div>
            </div>

            <p class="text-center"><a href="#">Naudojamos medžiagos</a><span class="icon-rightcircle"></span></p>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="col-lg-12 h-100">
            Other content..
          </div>
        </div>
        <div class="col-lg-4">
          <div class="col-lg-12 h-100">
            Other content..
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

最佳答案

如果要为所有台式机和移动设备的那些列表功能框使用相同的“ 2行2列”布局，请使用以下简单的CSS网格方法：

.list-feature {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 5px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<div class="list-feature">
  <span class="far fa-check-square">Privačios paskirties</span>
  <span class="far fa-check-square">Korpusiniai</span>
  <span class="far fa-check-square">Viešosios paskirties</span>
  <span class="far fa-check-square">Minkšti</span>
</div>