Веб-представление макета сетки - 2 строки 5 столбцов и в мобильном представлении 5 строк и 2 столбца

Question

Как создать 2 строки с 5 столбцами в веб-представлении и в сетке мобильного представления следует изменить его на 5 строк и 2 столбца

<div class="container">
    <div class="row">
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
      <div class="col col-sm-6">.col .</div>
    </div>
</div>

на самом деле 'col' принимает автоматическую ширину внутри строки, но мне нужно ограничить до 5 столбцов в 1 строке, а col-sm-6 имеет min-with: 567, так что такой же макет также перезаписывается в веб-представлении ..

Answer 1

    <div class="row">
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
      <div class="col-half col-5">Lorem ipsum dolor sit amet.</div>
    </div>

Вот CSS для выше

<style>
  .col-5{width: 20%;padding-left: 15px;padding-right: 15px;box-sizing: border-box;}
  @media only screen 
  and (max-width : 480px) {
    .col-half{width: 50%;}
  }
</style>