Разделение строки на 4 столбца, которые должны отображаться одинаково на мобильном телефоне

Question

Как разделить строку на 4 столбца, и на мобильном она должна быть похожа на 2 строки по 2 столбца в каждой.Попытка углового 6

        <div class="row" id="info" *ngIf="this.details">
  <div class="col-md-12 mb-3" id="heading">
    <h3>Meeting Information</h3>
  </div>
  <div class="col-md-2 mb-3">
    <p class="msg">Resource Name</p>
    <p class="msg"> Resource Email</p>
    <p class="msg"> Contact</p>
  </div>
  <div class="col-md-4 mb-3">
    <div>
      <p>: shammy</p>
    </div>
    <div>
      <p>: shammy@gmail.com</p>
    </div>
    <div>
      <p>: 7093241844 </p>
    </div>
  </div>
  <div class="col-md-2 mb-3">
    <p class="msg">Meeting Title</p>
    <p class="msg">Meeting Feedback Link</p>
    <p class="msg">Meeting Time</p>
    <button class="cncl" name="Submit" type="Submit">Cancel Meeting</button>
  </div>
  <div class="col-md-4 mb-3">
    <div>
      <p>: shammy</p>
    </div>
    <div>
      <p>: shammy@gmail.com</p>
    </div>
    <div>
      <p>: 7093241844 </p>
    </div>
    <div>
      <button class="resd" name="Submit" type="Submit">Reschedule Meeting</button>
    </div>
  </div>
</div>

Хорошо работает на чистом HTML.Когда я вижу отзывчивость, я делаю 2 строки по 2 столбца в каждой.То же самое должно работать для моего кода в angular

<div class="col-xs-12 col-sm-6">
 <div class="col-xs-3 col-sm-6">
 <p>Column 1</p>
 <p>Column 1</p>
 <p>Column 1</p>
 <p>Column 1</p>
 </div>
  <div class="col-xs-3 col-sm-6">
  <p>Column 2</p>
  <p>Column 2</p>
  <p>Column 2</p>
  <p>Column 2</p>
  </div>

</div>
<div class="col-xs-12 col-sm-6">
 <div class="col-xs-3 col-sm-6">
 <p>Column 3</p>
 <p>Column3</p>
 <p>Column 3</p>
 <p>Column 3</p>
 </div>
  <div class="col-xs-3 col-sm-6">
  <p>Column 4</p>
  <p>Column 4</p>
  <p>Column 4</p>
  <p>Column 4</p>
  </div>
</div>

Я пробовал тот же HTML в angular, но он не работает так же.Следует разделить на 2 строки по 2 столбца в каждом

Answer 1

    <div class="row" id="info" *ngIf="this.details">
  <div class="col-md-12 mb-3" id="heading">
  <h3>Meeting Information</h3>
  </div>
  <div class="col-6 col-md-3">
    <p class="msg">Resource Name</p>
    <p class="msg"> Resource Email</p>
    <p class="msg"> Contact</p>
  </div>
  <div class="col-6 col-md-3">
    <p>: shammy</p>
    <p>: shammy@gmail.com</p>
    <p>: 7093241844 </p>
  </div>
  <div class="col-6 col-md-3">
    <p class="msg">Meeting Title</p>
    <p class="msg">Meeting Feedback Link</p>
    <p class="msg">Meeting Time</p>
    <button class="cncl" name="Submit" type="Submit">Cancel Meeting</button>
  </div>
  <div class="col-6 col-md-3">
    <p>: shammy</p>
    <p>: shammy@gmail.com</p>
    <p>: 7093241844 </p>
    <button class="resd" name="Submit" type="Submit">Reschedule Meeting</button>
  </div>
</div>

Приведенный выше код отлично работает для меня

Answer 2

Я думаю, внутри div с классом row каждый div должен иметь класс col-xl-3 col-lg-3, чтобы он занимал одну строку на очень больших и больших устройствах, и col-md-6 col-sm-6 col-xs-6, чтобы он занимал две строкина средних, малых и сверхмалых устройствах.

Попробуйте:

<div class="row" id="info" *ngIf="this.details">
  <div class="col-lg-12" id="heading">
    <h3>Meeting Information</h3>
  </div>


  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
    <p class="msg">Resource Name</p>
    <p class="msg"> Resource Email</p>
    <p class="msg"> Contact</p>
  </div>


  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
    <div>
      <p>: shammy</p>
    </div>
    <div>
      <p>: shammy@gmail.com</p>
    </div>
    <div>
      <p>: 7093241844 </p>
    </div>
  </div>


  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
    <p class="msg">Meeting Title</p>
    <p class="msg">Meeting Feedback Link</p>
    <p class="msg">Meeting Time</p>
    <button class="cncl" name="Submit" type="Submit">Cancel Meeting</button>
  </div>


  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
    <div>
      <p>: shammy</p>
    </div>
    <div>
      <p>: shammy@gmail.com</p>
    </div>
    <div>
      <p>: 7093241844 </p>
    </div>
    <div>
      <button class="resd" name="Submit" type="Submit">Reschedule Meeting</button>
    </div>
  </div>
</div>

Вот вам Рабочий образец StackBlitz для вашей ссылки.