使用Bootstrap 4.3.1，为什么我的列不能在列表组中工作？

Question

我有：

    <div class="content">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <div class="row">
            <div class="col-sm-2 text-center">
              <img src="https://i.pravatar.cc/40" class="rounded-circle" />
              <br />
              <small>0:23</small>
            </div>
            <div class="col-sm-10 text-center">Stuff in here</div>
          </div>
        </li>
      </ul>
      <p>Platea tellus leo cras dictum senectus. Iaculis lacus sagittis vulputate sodales ac nostra class convallis curabitur! Nisl egestas sociis rutrum venenatis sollicitudin lacus leo amet inceptos primis porttitor. Dictum tellus ridiculus fames sem eleifend at aliquam vulputate commodo vel! Natoque, donec montes maecenas class pulvinar semper mi. Id ridiculus inceptos sem consequat nulla eleifend. Integer conubia elit sagittis.</p>
      <p>Massa faucibus risus augue hendrerit ullamcorper neque sociosqu. Quisque nibh faucibus augue justo nisi vehicula semper ac! Scelerisque interdum sit lectus leo cum. Eu posuere gravida primis cum ultricies sit. Lacinia cursus in placerat ante erat ultricies hendrerit semper sem cursus amet. Pulvinar praesent dictum natoque ad nibh mus tincidunt ad. Euismod consequat rhoncus netus augue ornare facilisi, ac eget. Nunc accumsan montes vitae sit sem dictumst! Proin posuere mattis platea litora ac gravida lectus non. Ultricies, eros elit lacinia sollicitudin vel montes nullam? Consectetur eleifend luctus tristique ultricies rutrum adipiscing. Fermentum.</p>
      <p>Consequat magna urna commodo inceptos egestas venenatis consectetur ultrices. Egestas fringilla taciti tempor elit aliquet sit. Conubia molestie scelerisque ligula curabitur facilisi vivamus eleifend vehicula amet proin etiam suspendisse. Nec nec porttitor elementum mollis cum gravida. Facilisi fusce pharetra vivamus facilisi nulla ad primis. Ornare a fringilla facilisis pretium! Sagittis nisi quis fermentum aliquam a tristique odio porta parturient proin. Elit condimentum.</p>
      <p>Nullam lacinia taciti ultricies faucibus tempus, enim ornare velit congue pretium suspendisse. Primis, facilisis fermentum taciti habitasse dui etiam habitasse ipsum hendrerit senectus. Netus cubilia placerat magnis aenean suspendisse viverra semper inceptos cursus. Scelerisque viverra neque rhoncus lobortis cubilia facilisi aenean dolor primis gravida. Tristique ligula cum habitant massa tincidunt accumsan odio!</p>
      <p>Urna dolor dictum taciti primis imperdiet mauris lorem condimentum hendrerit nibh justo vulputate. Himenaeos leo odio per quis parturient massa. Ipsum potenti himenaeos quam sodales accumsan dis pharetra primis quisque nec venenatis. Sodales quis risus consequat nec litora tincidunt in mauris. Maecenas sed eu ridiculus nec cum amet sapien pulvinar lorem tristique erat sapien. Sollicitudin rhoncus et dictumst pulvinar, fringilla curabitur purus. Natoque senectus torquent nibh vivamus mi platea facilisi fermentum lacus, rhoncus est semper. Montes mattis donec id magna nascetur pharetra scelerisque ultrices. Nisi sollicitudin ullamcorper cubilia elementum nullam molestie pellentesque, urna consequat massa.</p>
    </div>
  </div>

我尝试制作2列（分别为2列和10列），但在移动设备上看起来像这样：

Answer 1

只需使用col类而不使用breakpoints

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

<div class="content">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">
      <div class="row">
        <div class="col-2 text-center">
          <img src="https://i.pravatar.cc/40" class="rounded-circle" />
          <br />
          <small>0:23</small>
        </div>
        <div class="col-10 text-center">Stuff in here</div>
      </div>
    </li>
  </ul>
  <p>Platea tellus leo cras dictum senectus. Iaculis lacus sagittis vulputate sodales ac nostra class convallis curabitur! Nisl egestas sociis rutrum venenatis sollicitudin lacus leo amet inceptos primis porttitor. Dictum tellus ridiculus fames sem eleifend
    at aliquam vulputate commodo vel! Natoque, donec montes maecenas class pulvinar semper mi. Id ridiculus inceptos sem consequat nulla eleifend. Integer conubia elit sagittis.</p>
  <p>Massa faucibus risus augue hendrerit ullamcorper neque sociosqu. Quisque nibh faucibus augue justo nisi vehicula semper ac! Scelerisque interdum sit lectus leo cum. Eu posuere gravida primis cum ultricies sit. Lacinia cursus in placerat ante erat ultricies
    hendrerit semper sem cursus amet. Pulvinar praesent dictum natoque ad nibh mus tincidunt ad. Euismod consequat rhoncus netus augue ornare facilisi, ac eget. Nunc accumsan montes vitae sit sem dictumst! Proin posuere mattis platea litora ac gravida
    lectus non. Ultricies, eros elit lacinia sollicitudin vel montes nullam? Consectetur eleifend luctus tristique ultricies rutrum adipiscing. Fermentum.</p>
  <p>Consequat magna urna commodo inceptos egestas venenatis consectetur ultrices. Egestas fringilla taciti tempor elit aliquet sit. Conubia molestie scelerisque ligula curabitur facilisi vivamus eleifend vehicula amet proin etiam suspendisse. Nec nec porttitor
    elementum mollis cum gravida. Facilisi fusce pharetra vivamus facilisi nulla ad primis. Ornare a fringilla facilisis pretium! Sagittis nisi quis fermentum aliquam a tristique odio porta parturient proin. Elit condimentum.</p>
  <p>Nullam lacinia taciti ultricies faucibus tempus, enim ornare velit congue pretium suspendisse. Primis, facilisis fermentum taciti habitasse dui etiam habitasse ipsum hendrerit senectus. Netus cubilia placerat magnis aenean suspendisse viverra semper
    inceptos cursus. Scelerisque viverra neque rhoncus lobortis cubilia facilisi aenean dolor primis gravida. Tristique ligula cum habitant massa tincidunt accumsan odio!</p>
  <p>Urna dolor dictum taciti primis imperdiet mauris lorem condimentum hendrerit nibh justo vulputate. Himenaeos leo odio per quis parturient massa. Ipsum potenti himenaeos quam sodales accumsan dis pharetra primis quisque nec venenatis. Sodales quis risus
    consequat nec litora tincidunt in mauris. Maecenas sed eu ridiculus nec cum amet sapien pulvinar lorem tristique erat sapien. Sollicitudin rhoncus et dictumst pulvinar, fringilla curabitur purus. Natoque senectus torquent nibh vivamus mi platea facilisi
    fermentum lacus, rhoncus est semper. Montes mattis donec id magna nascetur pharetra scelerisque ultrices. Nisi sollicitudin ullamcorper cubilia elementum nullam molestie pellentesque, urna consequat massa.</p>
</div>