网格布局 Web 视图 - 2 行 5 列，移动视图中 5 行 2 列

【问题标题】：Grid layout Web View - 2 rows 5 columns and in Mobile View 5 rows and 2 columns网格布局 Web 视图 - 2 行 5 列，移动视图中 5 行 2 列
【发布时间】：2019-06-12 17:03:58
【问题描述】：

如何在网页视图和移动视图网格布局中创建 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”在行内采用自动宽度，但我需要限制为 1 行中的 5 列，并且 col-sm-6 具有 min-with:567 以便相同的布局在 web 视图中也被覆盖..

【问题讨论】：

标签： twitter-bootstrap

【解决方案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>

【讨论】：

我希望你会在项目中使用引导程序。如果您有任何疑问，请写在这里