Menu icon Foundation
Dividing rows in Foundation grid

Hey there,

New to Foundation but loving it so far. I'm trying to create a grid layout as demostrated below

Foundationgridquestion

Hopefully, my issue is clear. In the large layout I need my text boxes to stack to the right of a video but in the small layout the text boxes should split above and below a video. If someone could provide a grid layout solution I'd be impressed / grateful.

gridlayoutpullpushrowcolumn

Hey there,

New to Foundation but loving it so far. I'm trying to create a grid layout as demostrated below

Foundationgridquestion

Hopefully, my issue is clear. In the large layout I need my text boxes to stack to the right of a video but in the small layout the text boxes should split above and below a video. If someone could provide a grid layout solution I'd be impressed / grateful.

Marc McGee almost 5 years ago

Visibility classes.

Show one arrangement on large and one for small. Probably can isolate the visibility classe to the header column only, and make it work the way you want.

michael barry almost 5 years ago

This might help...
```HTML

<div class="row">
<div class="small-uncentered opposite large-6 columns">
<h2>Flex Video</h2>
</div>

<div class="small-uncentered large-6 columns">    
<div class="flex-video" style="max-width:420px;max-height:330px;">
<iframe width="100%" height="325" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>
</div>
</div>

<div class="large-6 columns">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

</div>    

cosmoSwiller almost 5 years ago

BACON PANCAKES