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

Trouble with setting the color attribute using setProperty in a GXT text area

Help needed in dynamically changing the font color of a text area from the color menu. Existing attempts to change it have not been successful. Can someone provide assistance? final ColorMenu fontColorMenu = new ColorMenu(); fontColorMenu.getPalette().a ...

javahtmlcssgwtgxt

What is the rationale behind the preset margin on the <body> tag?

Throughout my years in development, I have primarily focused on front-end web UI development. One recurring issue that has always irked me is the constant need to reset default browser styling assumptions, which often slips my mind until it starts affectin ...

htmlcss

Display a Bootstrap input button group addon, where the first button has rounded corners only after the second button has been hidden

I am working on a button group and need to hide the second button dynamically. However, I am facing an issue where the first button has a 90° border. How can I adjust the code below to display button 1 with a rounded border? If I decide to hide "button ...

javascriptjqueryhtmlcssbootstrap-4

Can you explain the difference between the <li> and <div> elements in HTML? How are they used differently

I'm currently exploring the elements for Selenium usage. I have a question about the <li> tag in HTML - could you explain its significance to me? Also, how does it differ from the <div> tag? ...

javahtmlselenium

Dynamic presentation created with Serif software

As a newcomer to web coding and one of the older generation, I recently created a basic .swf slideshow using Serif's graphic software. However, I realized that it does not display on an Apple iPad. You can experience this issue quickly here. My questi ...

javascripthtmlflash

Discover the method for two form fields to submit data to a distant page, located two pages away

Currently, I'm trying to figure out the best approach for having two fields submitted to a page that is located two pages away. To provide more context, let me elaborate on the situation. On the initial page, there will be two fields - workshop title ...

javascriptphpjqueryhtmlforms

Vertical stability bar

I need help creating a vertically fixed navigation bar for my website. Currently, I am using a method that has been discussed in various posts: HTML: <html> <head> src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">< ...

javascripthtmlcss

The sluggish rendering speed of AngularJS is causing a delay in displaying the loader

Within my application, I have tabs that load a form in each tab with varying numbers of controls. Some tabs may contain a large number of controls while others may have fewer. My goal is to display a loader while the contents are being rendered into the HT ...

javascriptjqueryhtmlangularjs

Chrome causing a background-size cover issue

I encountered an issue with this code. It runs smoothly on Firefox 50, but encounters failures on Chrome Version 54.0.2840.99 m (64-bit) on Windows. .test { background: url(datas/images/3.jpg) no-repeat center center fixed; background-size: cover ...

css

Custom pagination page size in AngularJS trNgGrid

I have been working on developing an Angular table using trNgGrid. It's functioning fine, but I am looking to incorporate custom pagination where the user can choose the number of page items to display per page. I checked out the TrNgGrid Global Opti ...

htmlangularjspaginationgrid

Utilizing ng-click within ng-repeat along with $index

I'm experimenting with using ng-click on a div that is part of an ng-repeat loop, utilizing $index as seen in the code below : HTML: <div class="elementContainer" ng-repeat="element in elements" ng-click="elementUrl($index)"> <h2>{{ ...

htmlangularjsindexingangularjs-ng-repeatangularjs-ng-click

I am having trouble getting any value back from my POST request using HTML, Node.js, and Express

I've been attempting to make a simple post request from an HTML page, but when I check the console after the post, it doesn't return anything. I'm confident that I have correctly set up the body parser on the server side. Could there be some ...

htmlnode.jsexpress

Tips on adjusting the position of an icon within a dropdown list in HTML?

I have a search field on my webpage with an icon inside it. I managed to find some sample code for the icon. However, I am struggling to position the icon to the right of the search box. I've tried adjusting the styling but haven't been successf ...

csshtml

Incorporate FontAwesome icons into table headers within an Angular framework

I am attempting to customize the icons for sorting in my table headers by following the guidelines laid out in the ng-bootstrap table tutorial. The NgbdSortableHeader directive plays a key role in changing the sorting of columns: @Directive({ selector: ...

htmlcssangularangular-fontawesome

How to assign attributes to multiple menu items in WordPress without using JavaScript

I'm currently working on adding attributes to each item in my WordPress navbar. Here is what I have at the moment: <ul id="menu-nav-bar" class="menu"> <li><a href="#text">text</a></li> <li><a href="#car ...

javascriptphphtmlwordpressfunction

Issue with display of Favicon in Google Chrome browser

My favicon is not appearing on my Chrome tab, even though I've checked multiple articles and confirmed that the code is correct. It does show up in Firefox, so I'm confused as to why it's not working in Chrome. I've cleared my cache and ...

htmlgoogle-chromefavicon

Utilizing tag keys for inserting text and adjusting text sizes within a Web application

Creating an online editing interface for coursework where keyboard events are used. The goal is to have the tab key insert text, while also reducing the size of the text on that line. However, upon using getElementById, an error message pops up stating: ...

javascripthtmlcssevents

Optimal method for identifying all inputs resembling text

I'm in the process of implementing keyboard shortcuts on a webpage, but I seem to be encountering a persistent bug. It is essential that keyboard shortcuts do not get activated while the user is typing in a text-like input field. The approach for hand ...

javascriptjqueryhtml

Another element concealing an element underneath

I am currently working on a website and could really use some assistance. Being new to web design, I find myself puzzled by this particular issue. The problem I'm facing is with a sawtooth pattern that should be displayed over a header, similar to the ...

htmlcss

What is the best way to collapse the entire navigation menu after clicking a link (nav-link) within it?

I created a navigation menu using HTML and SCSS, but I'm facing an issue where the menu does not close when clicking on links inside it. The menu continues to overlay the content on the page instead of closing. Essentially, I want the navigation menu ...

htmlcssonclicknavigation