css - 基金会的网格系统 : Hiding an element when screen becomes smaller doesn't work

Question

我有一个三列布局。这个想法是最右边的列应该在小屏幕上消失。

.rect {
  background-color: lime;
  margin-bottom: 10px;
  padding: 10px 0;
}

<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet"/>

<div class="row text-center">
  <div class="large-4 column rect">FIRST</div>
  <div class="large-4 column rect">SECOND</div>
  <div class="large-4 column rect show-for-medium-up">THIRD</div>
</div>

我想我使用了正确的类名。其余的编码也应该没问题。

但事实并非如此，我也不知道为什么。

有人知道我在这里做错了什么吗？

Answer 1

试试这个

<div class=" large-4 column rect hide-for-small-only ">THIRD</div>