Show table as columns on mobile and as rows on desktop

user_126833 0
Viewed 227

Is there a way to achieve this without duplicating the table using flexbox ?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="hidden-md visible-xs">
    <tr>
        <td>Cell 1 :</td>
        <td><strong>Content 1</strong></td>
    </tr>
    <tr>
        <td>Cell 2 :</td>
        <td>
          <strong>Content 2</strong>
        </td>
    </tr>
    <tr>
        <td>Cell 3 :</td>
        <td>
          <strong>Content 3</strong>
        </td>
    </tr>
    <tr>
        <td>Cell 4 :</td>
        <td>
          <strong>Content 4</strong>
        </td>
    </tr>    
</table>

<table class="hidden-xs visible-sm visible-md visible-lg">
  <tbody>
    <tr>
      <td class="text-center">Cell 1 :</td>
      <td class="text-center">Cell 2 :</td>
      <td class="text-center">Cell 3 :</td>
      <td class="text-center">Cell 4 :</td>
    </tr>  
    <tr>
      <td class="text-center"><strong>Content 1</strong></td>
      <td class="text-center"><strong>Content 2</strong></td>
      <td class="text-center"><strong>Content 3</strong></td>
      <td class="text-center"><strong>Content 2</strong></td>
    </tr>
  </tbody>
</table>

flexbox css
1 Answers

My approach would be to switch display of divs between inline-block and block

.title-content div{
  display:inline-block;
}

.content{
  font-weight:bold;
}

@media (min-width: 900px) { 
  .title-content{
    display:inline-block;
  }
  .title-content div{
    display:block;
    text-align:center;
  }
}
<div class="title-content">
  <div>Cell 1 :</div>
  <div class="content">Content 1</div>
</div>
<div class="title-content">
  <div>Cell 2 :</div>
  <div class="content">Content 2</div>
</div>
<div class="title-content">
  <div>Cell 3 :</div>
  <div class="content">Content 3</div>
</div>
<div class="title-content">
  <div>Cell 4 :</div>
  <div class="content">Content 4</div>
</div>

user_176848090
Related