Split Table Row(s) for smaller screens

问题

I have a table with fixed width of 960px with 5 columns.

When I view in a mobile device, I'd like to make columns 3,4,5 to appear as if it is on the next row.

Is there any way the CSS can break a row so it looks this, but still keep the original HTML code?

回答1:

You could use 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>

回答2:

you can try CSS media query, example (adjust your own width)

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 20%;}
    .col-2 {width: 20%;}
    .col-3 {width: 20%;}
    .col-4 {width: 20%;}
    .col-5 {width: 20%;}
}

@media only screen and (max-width: 767px) {
    /* For mobile: */
    .col-1 {width: 50%;}
    .col-2 {width: 50%;}
    .col-3 {width: 30%;}
    .col-4 {width: 30%;}
    .col-5 {width: 30%;}
}

more examples here

来源：https://stackoverflow.com/questions/33429849/split-table-rows-for-smaller-screens