Htykuut

I have a chart inside of a card. When being viewed on small or xs screen, I'd like for the card to be hidden but for the chart to still continue to be displayed. I can hide the card easy enough through bootstrap with "d-none d-sm-block", but it makes the chart disappear as well. I was hoping I could simply override the outer div command by placing "d-block" in the chart div, but it does not appear to be that simple.

So does anybody know how I can continue to show the inner chart div, while hiding the outer card div on smaller screens? I've created a very simplistic jsfiddle that you can resize to see what's going on.

<div class="container">

  <div class="row">

    <div class="card card-cascade wider reverse d-none d-sm-block" style="background-color: lightsteelblue">

      <div class="view view-cascade overlay">

        <div class="row justify-content-center d-block mt-3">

          <div class="col d-inline">

            1 of 2

          </div>

          <div class="col d-inline">

            2 of 2

          </div>

        </div>

      </div>

    </div>

  </div>

</div>