I would like my card list to collapse into 2 columns, with header repeating

Question

I am generating a "table" using bootstrap cards, fetching data via $smarty. I would like to collapse the the table into 2 columns when the viewport gets small.

So that the header will be on the left, with attributes like: name, date, age. And the corresponding column on the right has the data in line, like: Fred, 12.12.2012, 41.

Tried using the built in responsive feature in bootstrap cards, however when the viewport gets small, everything collapses into 1 column. With the header on top. I have tried jquery.basictable.min.js but it would not work.

Simple graphic of desired result:

name | stewie
date | 124214
age  | 9000

name | bob
date | 45845
age  | 65

<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-4">
                    <span class="font-medium-3">name</span>
                </div>
                <div class="col-4">
                    <span class="font-medium-3">date</span>
                </div>
                <div class="col-4">
                    <span class="font-medium-3">age</span>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-4">
                    <span class="font-medium-3">stewie</span>
                </div>
                <div class="col-4">
                    <span class="font-medium-3">124214</span>
                </div>
                <div class="col-4">
                    <span class="font-medium-3">9000</span>
                </div>
            </div>
            <div class="row">
                <div class="col-4">
                    <span class="font-medium-3">bob</span>
                </div>
                <div class="col-4">
                    <span class="font-medium-3">45845</span>
                </div>
                <div class="col-4">
                    <span class="font-medium-3">65</span>
                </div>
            </div>
        </div>
    </div>
</div>

I'll provide a link here to show what I would like to achieve: http://www.jerrylow.com/basictable/demo/

I assume that CSS could do a lot of what I need, but I am unable to find relevant information.

use `@media max-width` to trigger 2 column – I'm Limit Aug 09 '19 at 08:36 — I'm Limit, Aug 09 '19 at 08:36

I'm Limit · Accepted Answer · 2019-08-11T08:34:08.357

THIS IS OLD ANSWER:

Not best solution but you can try this

Main factor is

@media screen and (max-width:768px) will detect mobile for responsive
flex-direction: [column/row] !important will change orientation of table

@media screen and (max-width:768px) {
  body {
    /* Yellow mean mobile */
    background-color: #ff0 !important;
  }
  .card {
    flex-direction: row !important;
  }
  .card .row {
    flex-direction: column !important;
    white-space: nowrap;
    margin-right: 0;
    margin-left: 0;
  }
  .card .card-body {
    display: flex;
    flex-direction: row !important;
    white-space: nowrap;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="card">
    <div class="card-header">
      <div class="row">
        <div class="col-4">
          <span class="font-medium-3">name</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">date</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">age</span>
        </div>
      </div>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-4">
          <span class="font-medium-3">stewie</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">124214</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">9000</span>
        </div>
      </div>
      <div class="row">
        <div class="col-4">
          <span class="font-medium-3">bob</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">45845</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">65</span>
        </div>
      </div>
    </div>
  </div>
</div>

This is not solved

UPDATE: I have spend much time to find your solution with jQuery

So you need to use jQuery

so one way is make new element to toggle mobile and desktop view

Like this

If it help please submit this as answer

$(document).ready(function() {
  resposiveTable();
  $(window).resize(function() {
    resposiveTable(this);
  });
});

function resposiveTable(ele) {
  var win = $(window); //this = window
  if (win.width() < 768) {
    $(document.body).css("background-color", "lightyellow");
    $('.responsive-CardTB .card').hide();
    //GENERATE responsive
    if ($(".responsive-CardTB .mobile-content").length < 1) {
      var mobileview = document.createElement("div");
      $(mobileview).append('xxx');
      $(mobileview).addClass('mobile-content container');
      $('.responsive-CardTB')
        .append(mobileview);
    }
    $('.responsive-CardTB .mobile-content').show();
    updateContent();
  } else {
    $(document.body).css("background-color", "");
    $('.responsive-CardTB .card').show();
    $('.responsive-CardTB .mobile-content').hide();
  }
}

function updateContent() {
  var mbcontent = $(".responsive-CardTB .mobile-content")
  mbcontent.empty();
  $('.responsive-CardTB .card .card-body .row')
    .each(function(i, ele) {
      var row = $(document.createElement("div"));
      row.addClass('card container');

      $(ele).find('.col-4').each(function(index, element) {
        var rowdata = $(document.createElement("div"));
        rowdata.addClass('row');

        var header =
          $('.responsive-CardTB .card .card-header .row .col-4')
          .eq(index).html();
        var colhead = $(document.createElement("div"));
        colhead.addClass('card-header col-4').html(header);
        rowdata.append(colhead);

        var colbody = $(document.createElement("div"));
        colbody.addClass('card-body col-8').html($(element).html());
        rowdata.append(colbody);

        row.append(rowdata);
      });

      mbcontent.append(row);
    });
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid responsive-CardTB">
  <div class="card">
    <div class="card-header">
      <div class="row">
        <div class="col-4">
          <span class="font-medium-3">name</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">date</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">age</span>
        </div>
      </div>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-4">
          <span class="font-medium-3">stewie</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">124214</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">9000</span>
        </div>
      </div>
      <div class="row">
        <div class="col-4">
          <span class="font-medium-3">bob</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">45845</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">65</span>
        </div>
      </div>
    </div>
  </div>
</div>

One issue with this is that everything goes into 1 row. So we get something like: attributes | data | data Instead of: attributes | data attributes | data I would really like for the header to repeat for each row. — user2008560, Aug 09 '19 at 09:13
may be need to use `javascript` I didn't use use because you didn't tag it — I'm Limit, Aug 09 '19 at 09:41
I have update my new code already. I have spend so much time with. sorry for late — I'm Limit, Aug 11 '19 at 08:35

I would like my card list to collapse into 2 columns, with header repeating

1 Answers1