Grid-System der Foundation: Das Ausblenden eines Elements, wenn der Bildschirm kleiner wird, funktioniert nicht

Question

Ich habe ein Layout mit drei Spalten. Die Idee ist, dass die rechte Spalte auf kleinen Bildschirmen verschwindet.

.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>

Ich glaube, ich richtig Klasse-Namen verwendet haben. Der Rest der Codierung sollte auch in Ordnung sein.

Aber es nicht und ich habe keine gute Idee warum.

Weiß jemand, was ich hier falsch mache?

Answer 1

Versuchen Sie, diese

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

Answer 2

Sie falsche Klasse, verwenden Sie hide-for-small-only oder show-for-medium:

.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 hide-for-small-only">THIRD</div> 
 
</div>

Lesen Sie mehr Zurb Foundation Grid