html - 如何在移动设备上的Materialize CSS中更改水平卡的布局？

我正在尝试创建类似于this的布局：图像和文本应在台式机和平板电脑上并排放置。在移动设备上，它们应显示在一列中，图像或文字在顶部，另一列在其下方。我正在使用Materialize CSS中的水平卡来执行此操作。但是，在移动设备上，卡仍以水平格式显示。有什么方法可以使用Materialize CSS更改此设置吗？

这是我当前的代码：

  <div class="col s12 m6 l6">
    <div class="card horizontal">
      <div class="card-image">
        <img src="https://images.unsplash.com/photo-1454994834218-5ffbb76c0e74?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dddc4ee524eee04e325dbc73367391d8">
      </div>
      <div class="card-stacked">
        <div class="card-content valign-wrapper">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="card-action">
          <a href="#">Sample Link</a>
        </div>
      </div>
    </div>
  </div>
<style>
    .card-content{
        margin:0 30% 0 30px;
    }
</style>

我也尝试使用代码here，但是图像被剪切掉了，即使在移动设备上，卡的布局也仍然是水平的。

<div class="sample">
      <div class="row">
        <div class="col s12 m6 l6 left-image">
        </div><!-- /col s12 m6 left-image -->
        <div class="col s12 m6 l6 text-right">
          <div class="test">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          </div><!-- /col s12 m6 icon-text -->
        </div><!-- /col s12 m6 text-right -->
      </div><!-- /row -->
  </div>
<style>
.sample>.row{
  display:flex;
}

.sample>.row>.col{
    align-items: center;
    display: flex;
    flex: 1;
    justify-content:center;
    text-align: center;
}

.sample>.row>.col.left-image{
  background:url("https://images.unsplash.com/photo-1454994834218-5ffbb76c0e74?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dddc4ee524eee04e325dbc73367391d8");
  background-size:cover;
  height: auto;
}
</style>

另外，是否有一种方法可以使图像和文本保持对齐或在台式机和平板电脑上具有几乎相同的高度，而又不会切断图像？

最佳答案

GitHub上有一个pull请求，该请求完全实现了您想要的。
Pull请求以sass编写。这是它编译为：

@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;
  }
}

如果您正在寻找sass版本，或者想要更多信息，请查看GitHub上的the pull request。