html - Bootstrap.: col-sm 行为很早。i,e 当尺寸小于 767px 时它变成 col-sm

Question

我正在创建响应站点。我知道当屏幕尺寸小于 576px 时 col-sm 开始。但是在我的代码中，它的行为很早。我不擅长英语。希望我能说清楚。当屏幕尺寸介于 767px 和 500px 之间时，我想显示的内容如下（下图）：但在我的代码中（我附上了下面的链接），它的行为并非如此。我怎样才能做到这一点？提前致谢

[![在此处输入图像描述][1]][1]

对于小于 500 像素的屏幕，我想像这样显示它：[代码笔链接][2]

<div class="col-12">
    <h3>Oda Seçenekleri</h3>
    <div class="room-outer">
      <div class="row">
        <div class="col-lg-6 col-md-5 col-sm-12" id="res_img">
          <div class="room-left">
            <div class="row">
              <div class="col-lg-6">
                <img src="./img/room-1.jpg" class="image">
              </div>
              <div class="col-lg-6">
                <h6>  Manzaralı</h6>
                <ul>
                  <li><i class="fas fa-bed"></i>Çift yatak</li>
                  <li><i class="fas fa-users"></i>3 </li>
                  <li><i class="fas fa-bed"></i>80 ㎡&lt;/li>
                </ul>
                <a href="#">Detaylı  Bilgisi <i class="fas fa-arrow-right"></i></a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-7 col-sm-12" id="res_img_two">
          <div class="room-right">
            <div class="row">
              <div class="col-lg-8 col-12">
                <ul>
                  <li><i class="fas fa-bed" style="border:1px solid #fff6d6; padding:5px 3px; border-radius: 4px;"></i> tek geniş yatak</li>
                  <li><i class="fas fa-users"></i><span Çocuk Ücretsiz</span></li>
                  <li><i class="fas fa-bed"></i><span> İptal</span></li>
                </ul>
              </div>
              <div class="col-lg-4 col-12">
                <div class="room-price">
                  <p> 3 Gece için Toplam:</p>
                  <span>1.900 TL</span>
                  <a href="#">ODAYI SEÇ</a>
                </div>                   
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

标签： htmlcssbootstrap-4