How To Change Layout Of Horizontal Cards In Materialize Css On Mobile?

I'm trying to create a layout that's similar to this: the image and text should be side-by-side on desktop and tablet. On mobile, they should show up in one column with either the

Solution 1:

There is a pull request on GitHub that implements exactly what you want. The Pull request is written in sass. This is what it compiles to:

@mediaonly screen and (min-width: 601px) {
  .card.responsive-horizontal {
    display: flex;
  }
  .card.responsive-horizontal.small.card-image, .card.responsive-horizontal.medium.card-image, .card.responsive-horizontal.large.card-image {
    height: 100%;
    max-height: none;
    overflow: visible;
  }
  .card.responsive-horizontal.small.card-imageimg, .card.responsive-horizontal.medium.card-imageimg, .card.responsive-horizontal.large.card-imageimg {
    max-height: 100%;
    width: auto;
  }
  .card.responsive-horizontal.card-image {
    max-width: 50%;
  }
  .card.responsive-horizontal.card-imageimg {
    border-radius: 2px002px;
    width: auto;
    max-width: 100%;
  }
  .card.responsive-horizontal.card-stacked {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .card.responsive-horizontal.card-stacked.card-content {
    flex-grow: 1;
  }
}

If you are looking for the sass version of this or you want more information, have a look at the pull request on GitHub.