jquery - 较小屏幕的拆分表行

Question

我有一个固定宽度为 960 像素、有 5 列的表格。

当我在移动设备上查看时，我想制作第 3、4、5 列看起来好像它在下一行。

CSS 有什么方法可以打断一行，让它看起来像这样，但是还保留原来的 HTML 代码吗？

Answer 1

你可以使用 FlexBox:

.flexParent{
  display: flex;
}

.flexChild{
  width: 20%;
}

@media only screen and (max-width: 767px) {
   .flexParent{
      flex-wrap: wrap; 
   }
   .flexChild{
     width: 50%;
   }
   .wrap{
     width: 30%;
   }
}

<div class="flexParent">
  <div class="flexChild">1</div>
  <div class="flexChild">2</div>
  <div class="flexChild wrap">3</div>
  <div class="flexChild wrap">4</div>
  <div class="flexChild wrap">5</div>
</div>