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:

@media only 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-image img, .card.responsive-horizontal.medium .card-image img, .card.responsive-horizontal.large .card-image img {
    max-height: 100%;
    width: auto;
  }
  .card.responsive-horizontal .card-image {
    max-width: 50%;
  }
  .card.responsive-horizontal .card-image img {
    border-radius: 2px 0 0 2px;
    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.