Q:

What classes i am missing- Foundation 6?

I am learning foundation 6 framework and I am stuck in getting the desired result.

I want this three column grid approach up till mobile.

Below is what I am trying but unable to produce the result.

.MyNewRow {
  background: red;
}

.MyNewRow .large-4 {
  background: yellow;
}

.MyNewRow .large-4+.large-4 {
  background: green;
}

.MyNewRow .large-4+.large-4+.large-4 {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />

<div class="row MyNewRow">
  <div class=" large-4 ">I am Row 1</div>
  <div class=" large-4 ">I am Row 2</div>
  <div class=" large-4 ">I am Row 3</div>
</div>

A:

User class small-# for mobile:

.MyNewRow {
  background: red;
}

.MyNewRow .small-4 {
  background: yellow;
}

.MyNewRow .small-4+.small-4 {
  background: green;
}

.MyNewRow .small-4+.small-4+.small-4 {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />

<div class="row MyNewRow">
  <div class="small-4 columns">I am Row 1</div>
  <div class="small-4 columns">I am Row 2</div>
  <div class="small-4 columns">I am Row 3</div>
</div>



If you want same output on mobile & desktop then only used small-# class, no need to add  another class like large-# or medium-#
More info check this: http://foundation.zurb.com/sites/docs/grid.html

