Placing a stacked column underneath existing columns with Foundation grid technology

Can Foundation's grid system be used to achieve the following layout?

On Large Screens
################ ################
#              # #              #
#              # #    Col 2     #
#              # #              #
#              #              #
#    Col 1     # ################
#              # #              #
#              # #    Col 3   #
#              # #            #
#              # #           #
################ ################

On Medium Screens
################ ################
#              # #             #
#              # #    Col 2     #
#              # #                #
#              #                  #
#    Col 1     # ################
#              # 
#              # 
#              # 
#              # 
#################################
#                               #
#            Col 3        #
#                               #
#                               #
#################################

The code snippet in question is as follows:

<div class="row">
  <div class="large-6 columns">
    <p>Column 1</p>
  </div>
  <div class="large-6 columns">
    <div class="row">
      <div class="large-12 columns">
        <p>Column 2</p>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <p>Column 3</p>
      </div>
    </div>
  </div>
</div>

I am exploring the best approach for this. Column 2 content will have text-align: right;, taking up less space, while Column 3 content will be wider and may need line breaks, contrary to the original design intention of aligning Col 3 next to Col 2.

htmlcsszurb-foundation

Answer №1

To achieve this layout, you can group the columns in a single row container like so:

<div class="row">
  <div class="large-6 small-6 columns">
    <p class="tall">Column 1</p>
  </div>
  <div class="large-6 small-6 columns">
    <p>Column 2</p>
  </div>
  <div class="large-6 small-12 columns">
    <p>Column 3</p>
  </div>
</div>

For more information and a live example, check out this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choosing the :after pseudo element that comes after the p element within the container's previous element

Currently, I have a specific HTML code that is not editable: <div> <input type="text" id="name" /> </div> To add a label after the input using CSS (since "after" doesn't work on input fields), I do the following: div:after { ...

htmlcss

Is it possible in JavaScript to have three different input values contribute to a sum without using HTML event attributes?

I've been working my way through the 57 programming exercises book by Brian P. Hogan. For most of these exercises, I've been attempting to create a GUI. In this particular exercise, the goal is to calculate the Simple Interest on a Principal am ...

javascripthtmlarraysuser-interface

Display Descriptions Upon Hovering Over Images

I am attempting to utilize JavaScript to display the caption of an image only when it is being hovered over, and to have a default caption shown when no image is being hovered. <ul class="logos"> <li class="image-1"></li> <li ...

javascripthtmlcaption

Unable to append Jquery attribute to a div component

My code snippet is creating a div with specific classes and elements: '<div class="ctrl-info-panel col-md-12 col-centered">'+ '<h2>You do not have any projects created at the moment.</h2>'+ '<div id="t ...

javascriptjqueryhtmlcss

Retrieve information from an external JSON file and present it in a table format - Obtain the most recent data available

I am attempting to extract the data from On the website, there is a dropdown menu that displays two different screenshots. I want to modify my code so that it shows the most recent screenshot data in a table. Here is my current code: http://jsfiddle.net ...

jqueryhtmljsonparsing

"Delve into the art of utilizing negative space between elements with

Looking to implement hover detection between rows in a grid container, rather than on individual items. The number of items in the container and per row may vary. https://i.sstatic.net/yBgKI.png It's important to note that the item count in the cont ...

javascriptjqueryhtmlcsshover

404 error occurs when attempting to load SVG files in Webpack 2

Recently, I delved into the world of webpack. However, I encountered a problem when trying to load an SVG file referenced in one of my CSS files. Despite trying various loaders such as this, that, and the other, I keep receiving a 404 error. Can anyone pro ...

javascriptcsssvgwebpack-2

Personalize the way UIkit tooltips appear

I've been working on customizing a uikit tooltip for my checkbox. I managed to change the font and background color, but for some reason, I can't adjust the font size. I even tried adding a custom class without success. Do you think it's pos ...

cssuikit

Library for HTML styling in JavaScript

Is there a reliable JavaScript library that can automatically format an HTML code string? I have a string variable containing unformatted HTML and I'm looking for a simple solution to beautify it with just one function call. I checked npmjs.com but co ...

javascripthtmlnpmpackage

How can I set the text to be in the center of a VML

For my email template, I need to center text over an image. Although I attempted a solution from this source, the image is not being displayed. Below is the code snippet: <div align="center" style="margin: 0; padding: 0;"> <table border="0" c ...

htmlcssemailoutlookvml

Trouble experienced with the window.open() function on Safari

When using Safari, it can sometimes block the opening of a new tab through the window.open() function during an ajax call. To bypass this blocking, we must first call window.open() to open a new tab before making the ajax call. Refer to this Stack Overflow ...

javascripthtmlajaxsafariwindow.open

Error: SyntaxError - Unexpected token 'if' found. Additionally, ReferenceError - berechnung is not defined

I keep encountering two error messages and I'm not sure where the issue lies: Uncaught SyntaxError: Unexpected token 'if' Uncaught ReferenceError: berechnung is not defined Any idea what might be causing this problem? I've reviewed t ...

javascripthtml

Centered div's overflow remains visible

Yes, the positioning of the parent container is set to relative. I am attempting to achieve a ripple effect by expanding multiple circles from a central point in all directions until they stretch beyond the viewport. I have created circular divs that are ...

htmlcssoverflow

Adjusting the options in the subsequent dropdown menu based on the selection made in the initial dropdown menu

I am currently working on select boxes where values are dynamically added through an array. For example, if I have 4 values in the first select box, I only want to display 3 values in the second select box, excluding the value that has already been selecte ...

javascriptjqueryhtml

Using Angular's ngFor directive to render 3 buttons in each row

I am attempting to show 3 buttons per div with the class "row". Using *ngFor to loop through the array to display buttons with the correct text. Here is a sample of my data: [{"NODE_ID":21.0,"NODE_DESC":"TERMINAL ASSEMBLY",&q ...

htmlangulartypescriptngfor

Obtaining the Value of Input Text

Let's say you have the following HTML code: <form> Enter hash here: <input type="text" name="hash"> <button type="submit" formaction="/tasks/">Retrieve Url</button> </form> Is there a way ...

javascripthtml

Emphasize x-axis heading in a Highcharts graph

In my Highcharts bar graph, I am looking for a way to dynamically highlight the x-axis label of a specific bar based on an external event trigger. This event is not a standard click interaction within the Highcharts graph. Currently, I have been able to r ...

csstypescripthighchartstypescript2.0

Make sure all Bootstrap elements have square edges

Can someone help me with using bootstrap3 to achieve square corners for all buttons, menus, and navs? I have tried setting the edges to be square using this code snippet, but my specific requirement is to only have square corners for the buttons, menus, a ...

htmlcsstwitter-bootstrap-3

Increase the size of the grid system column upon clicking on a Bootstrap icon

I am using Google Maps in a tab with Bootstrap, but the map is too small. I would like to change the Bootstrap grid system when I click on a FontAwesome icon: the first column should turn into col-md-8, and the second column should become col-md-4. Here i ...

javascriptjqueryhtmlcssbootstrap-4

HTML CSS list-style-position: outside not functioning as expected

I'm having trouble figuring out why the CSS property list-style-position: outside isn't working as expected. I've made sure to use the important tag and have included it in all my CSS classes, but for some reason, it's still not taking ...

htmlcss