Bootstrap - Что не так с этим кодом?

Question

Используя классы начальной загрузки, я хочу, чтобы каждый элемент имел ширину 100% для рабочего стола и планшета, но 50% для мобильного. Но я не понимаю, почему это не работает так, как должно.

HTML

<div class="row">
  <div class="col-xs-12">

    <div class="panel">
    <div class="row">
        <div class="col-xs-12">
         some text
        </div>
        <div class="col-xs-12">
          <span class="text">Accordion with image and text</span>
        </div>
      </div>
    </div>

  </div>
</div>

SCSS

.panel {
  display: flex;
  padding: 20px 10px;
  border: 1px solid #000;
  align-items: center;

  div {
    outline: 1px solid red;
  }

}

Результат выглядит так:

Что не так с моим кодом?

Answer 1

Прежде всего, инфикс -xs- был удален из Bootstrap 4 , поэтому классы просто col-1, col-2, col-3,col-12 .

Как вы уже упоминали, вы хотите, чтобы каждый элемент имел ширину 100% при просмотре на рабочем столе и планшете, но 50% при просмотре с мобильного.

Вы должны использоватькод ниже.

<div class="row">
  <div class="col-sm-12 col-6">
       some text
  </div>
 <div class="col-sm-12 col-6">
       Accordion with image and text
  </div>
</div>