Foundational 5 Grid Shuffle Shift

I am currently utilizing Foundation 5 and am aiming to create a unique DIV layout on a mobile display:

--------------------
|        A         |
--------------------
|        B         |
--------------------
|        C         |
--------------------
|        D         |
--------------------
|        E         |
--------------------

In addition, I would like the arrangement to appear as follows on a desktop screen:

--------------------------------
|                              |
|              A               |
|                              |
--------------------------------
|                  |           |
|        B         |           |
|                  |           |
--------------------     E     |
|                  |           |
|        C         |           |
|                  |           |
--------------------------------
|                              |
|              D               |
|                              |
--------------------------------

If anyone has insight on how to accomplish this, please do share.

Currently, I have organized the layout into three rows: one for A, one including B, C, and E, and one for D. I have experimented with Push and Pull to rearrange D & E on the mobile display, but I am facing challenges due to their placement in different rows.

Please note that the content within the DIVs is dynamic, making it impossible to utilize absolute positioning to reorganize the DIVs on mobile screens.

Thank you in advance for your assistance.

htmlcsszurb-foundation

Answer №1

If you want your webpage to display differently on a desktop versus a mobile device, you can achieve this by using the following HTML code:

<div class="row">
    <div class="large-12 columns">
        A
    </div>
</div>

<div class="row">
    <div class="large-x columns">
        <div class="row">
            <div class="large-12 columns">
                B
            </div>
        </div>
        <div class="row">
            <div class="large-12 columns">
                C
            </div>
        </div>
    <div class="large-(12-x) columns">
        E
    </div>
</div>

<div class="row">
    <div class="large-12 columns">
        D
    </div>
</div>

To detect if the page is being accessed by a mobile browser and dynamically manipulate the DOM accordingly, you can utilize the userAgent property in JavaScript. For guidance on detecting handheld devices with jQuery, you can refer to this resource. Once the detection is done, you can use simple jQuery commands to make the necessary adjustments.

Answer №2

If you wish to achieve this using foundation.css, the approach would involve toggling the visibility of div-E based on the screen size.

<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/>
<div class="row">
    <div class="small-12 columns">
        A
    </div>
</div>

<div class="row">
    <div class="small-12 medium-8 columns">
        <div class="row">
            <div class = "small-12 columns">
                B
            </div>
        </div>
        <div class="row">
            <div class = "small-12 columns">
                C
            </div>
        </div>
    </div>
    <div class="small-12 medium-4 hide-for-small columns">
        E
    </div>
</div>

<div class="row">
    <div class = "small-12 columns">
        D
    </div>
</div>
  <div class="row">
<div class="small-12 medium-4 show-for-small columns">
        E
</div>  
    </div>

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

Decode JSON data retrieved from a remote URL address

I am in need of assistance decoding this JSON code from a URL page. The JSON code on the URL is in the following format: {"current":{"artists_id":"55","albums_id":null,"albums_tracks_id":null},"html_current":"<li><p>Pr\u00e1v\u011b h ...

phphtmljsonurldecode

Challenges faced when using jQuery UI autocomplete

My code utilizes jQuery UI's autocomplete method on a text box: $(function() { $('#project').autocomplete({ source: function(request, response){response(Object.getOwnPropertyNames(projects))}, minLength: 0, ...

javascriptjqueryhtmljquery-uiautocomplete

Modify the appearance of the PrimeReact navigation bar

I am struggling to change the background color of the navbar in my PrimeReact application. I have tried adding CSS styling in various places, but nothing seems to work. All I want is to customize the background color while keeping the default PrimeReact ...

cssreactjsfrontendstylingprimereact

Activate the last div within the identical class

When I make an ajax call to fetch more results and append them to the existing ones on the same page, I want to display a scrolling spinner while the contents are being fetched. I am adding a div at the bottom of the fetched results like this: <div cla ...

htmlajaxjquery

Tips on positioning a button "above" the carousel-control-next icon

I have a carousel and I added a button to stop the spinning. However, when I try to click on the button, it seems like the "carousel-control-next" tag is being clicked instead. How can I solve this issue? ** Interestingly, when I remove the "carousel-cont ...

javascripthtmljquerytwitter-bootstrapbootstrap-4

Centered inline-block divisions

I've been coding for a number of years now, but I've recently started learning CSS. I'm currently facing an issue and need some help. I want to place two divs next to each other and center them. Here's the code I'm using: HTML: & ...

htmlcss

Is there a way to assign a value of 1 to the input-group spinner?

At first, I thought this problem would be easy to solve, but now I'm finding myself stuck. My goal is to have the input-group spinner display the value 1 when a user opens the application. <input id="option1" type="number" min="1" value ="1" ...

htmlangularjstwitter-bootstrap

Using CSS to Put Text in the Back of Other Text

After being inspired by the structure of view-source:, I attempted to layer one instance of text behind another using z-index. However, my initial attempt failed as it became clear that utilizing z-index required the position attribute to work effectively. ...

csspositionz-index

Opacity is a key feature of Bootstrap 5 background colors

I am currently facing a challenge with creating an OR divider using Bootstrap 5, as it seems to not display correctly when compared to Bootstrap 4. The text's background color also appears to have some transparency in my project. Here is the code I a ...

htmlcssbootstrap-4opacitybootstrap-5

Displaying multiple div elements when a button is clickedLet multiple divs be

ISSUE Hello there! I'm facing a challenge where I need to display a div when a button is clicked. The issue arises from having multiple divs with the same class, making it difficult for me to target each individual div... Image1 Image2 Desired Outco ...

javascriptjqueryhtmlcss

What are some ways to decrease the dimensions of my dateTimePicker?

I'm looking to decrease the dimensions of my datetime picker box. Here's an image of my current dateTimePicker: https://i.stack.imgur.com/MeJlq.png Below is the component I'm using: import React, { useState } from 'react'; import ...

cssreactjsredux-formreact-bootstrap

Overflowing text in the div element

Attempting to generate a sample document and aiming to enlarge the font-size by clicking the "Medium" & "Large" button. Encountering an issue where the font-size overlaps with other divs when pressing the "large" button, though not experiencing any proble ...

jqueryhtmlcss

Unique ways to serialize an HTML element efficiently: JavaScript tricks

Is there a way to store a reference of an HTML tag for future use? For instance, if I click on a div and save a pointer to that div in JavaScript, is it possible to serialize this pointer and then de-serialize it to use in another part of the web applicat ...

javascripthtmlcssdomserialization

.htacces Disables Styling on Page

I've been trying to understand the functionality of .htaccess RewriteRule. Here is a URL example where I have experimented with .htaccess: http://example.com/test/home This used to be: http://example.com/test/index.php?p=1 My goal is to redirect ...

css.htaccess

What is the best way to verify the font-family using JavaScript?

To verify if the user has installed the font family, we can run a JavaScript function with AngularJS. I am using a Typekit font and have only loaded this service for users who do not have this specific font. ...

javascriptcssangularjsfonts

What is the regular expression that allows numbers between 1 and 24, including decimals?

Can anyone help me create a regex expression that only allows numbers between 1 and 24, with up to 2 decimal places? The numbers should range from 1 to 24, as well as include decimals like 1.00, 1.01, 1.02, all the way up to 24.99. ...

javascripthtmlregexexpression

Tips for customizing the appearance of jscrollpane in EasyUI

I need help customizing the jscrollpane style in EasyUI Frozen Columns for DataGrid. I've tried changing it using the following CSS: ::-webkit-scrollbar { width: 12px; } However, it doesn't seem to have any effect. ...

cssjscrollpanejquery-easyui

Updates made to the Transform property in Mui Theme are not appearing in the browser

I'm looking to modify the MuiInputLabel.outlined. While I can see various changes when inspecting in the browser, I'm having trouble seeing the transform property change specifically. This is the current configuration of my MuiInputLabel: MuiInp ...

cssreactjsmaterial-ui

How can you determine if multiple checkboxes have been checked with "if" statements following a button click?

I am looking to display a message after clicking a button if one or more checkboxes are checked. I would prefer using Jquery for this functionality. Any help on achieving this would be highly appreciated. $(function() { $(".btn").click(function() { ...

javascripthtmljquery

Contrast the text within two div elements using jQuery and modify the color of any identical words

i have a pair of div's with sentences inside first div: i keep an expensive pen in my pocket. second div i own an expensive watch. given the above two divs, I aim to compare the sentences and identify the common words present in both. ...

javascriptphpjqueryhtml