Reorder HTML elements based on the size of the screen

Is it possible to modify the order of HTML elements based on screen size?

For instance, on larger screens such as desktops, the order should be:

element1 element2 element3

However, when viewed on a phone, this layout doesn't fit the screen width. I would like it to display as follows:

element2
element1
element3

Considering that Div2 is the main div, it should be centered on large screens and at the top on smartphone screens.

I am utilizing the Foundation framework for the website.

Here's a sample code snippet:

<div id="container" class="row medium-up-3">
   <div id="element1" class="column column-block">

   </div>
   <div id="element2" class="column column-block">

   </div>
   <div id="element3" class="column column-block">

   </div>     
</div>

I've dedicated significant time to learning HTML and CSS for building websites. Although I have plans to delve into JavaScript in the future, any solution involving it would be acceptable.

javascripthtmlcsszurb-foundation

Answer №1

If you're looking for a way to style your elements with CSS using flexbox, check out this helpful guide to get started:

flex-direction can be set to either row or column based on how you want the elements to flow

To rearrange the order of elements, you can use order (for example, setting order: 1 on #element2 will move it to the end)

#container {
  display: flex;
  flex-direction: column;
}

#element2 {
  order: -1;
}
<div id="container" class="row medium-up-3">
  <div id="element1" class="column column-block>
    #1
  </div>
  <div id="element2" class="column column-block>
    #2
  </div>
  <div id="element3" class="column column-block>
    #3
</div>

Answer №2

Here is a simple solution:

You can utilize CSS media queries to control the display of content based on screen size:

@media (max-width:768px){
    #desktop-content{
        display: none;
    }
    #mobile-content{
        display: block;
    }
}

If needed, you can create separate HTML sections for desktop and mobile devices to accommodate significant differences in layout.

For more information on media queries, check out this resource - http://www.adobe.com/devnet/archive/dreamweaver/articles/introducing-media-queries.html

Answer №3

To switch things up, try using the class medium-up-12 in place of the class assigned to the container ID. Best of luck!

<div id="container" class="row medium-up-12">
  <div id="element1" class="column column-block">
    #1
  </div>
  <div id="element2" class="column column-block">
    #2
  </div>
  <div id="element3" class="column column-block">
    #3
  </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

What methods can I use to identify the selector for this element?

After pinpointing the specific element in Google Chrome using inspect element, what kind of path or syntax should I use to apply a method to this element? The hierarchy for the element is outlined below: html body div#contentDiv div#searchFormDiv ...

csscss-selectors

"Eliminating the visual feedback frame from your Samsung Galaxy browser: A step-by-step

After clicking a link, a dark orange frame is displayed around it. This frame can sometimes persist until the next scroll or screen touch. Similarly, when other elements are clicked, an orange frame may appear, adjusting in size to reflect the element cli ...

androidhtmlcssbrowsersamsung-mobile

Utilize Google Cloud Functions for speedy and efficient execution

After delving into tutorials on Firebase Cloud Functions, it's clear that Express is the go-to tool. However, I'm curious if it would be beneficial to set up a separate Express app for each function, with each mini-app containing only one route. ...

javascriptfirebaseexpressgoogle-cloud-functions

Switch up the placement of the boxes by moving them in different directions, such as

I've been attempting to recreate the button movement demonstrated in this link , but I'm having trouble achieving it. Using CSS animation, I can make the buttons move in a straight line, here's what I have so far: <div id="box" style=&ap ...

javascriptjqueryhtmlcss

Show data retrieved by an AJAX call in a user interface

Through an ajax call, I successfully retrieved data from active directory. The PHP file used for this ajax call to active directory can be found here. Upon inspecting the browser console, the ajax call output includes information such as sn, givenname, e ...

javascriptphpjqueryhtmlajax

What steps should I follow to make a sticker adhere to a div?

I'm currently in the process of designing a sticker that attaches to the top of a div, much like this: https://i.sstatic.net/aG329.png <div className="upgrade-premium"> <div className="upgrade-team"> <h1>Prem ...

htmlcsssass

Tips for organizing divs once another div has been hidden using jquery

I am working towards implementing a live result filter feature. There are three filters available: Good fit, bad fit, and scheduled. When the "Good fit" filter is clicked, it should display panels with the class "good_fit_panel". Let's assume there ar ...

javascriptjquery

Setting up RTL (Right to Left) functionality in Material UI version 5 - A Step-by-Step Guide

After updating my app to version 5 of Material-UI from version 4, I noticed that the RTL support is no longer functioning. I carefully followed the instructions in the documentation: https://mui.com/guides/right-to-left/ The current outcome is that the ...

javascriptreactjsmaterial-ui

The content of btn-id element in Angular is showing as undefined

I have a JavaScript file located at sample/scripts/sample.js and there are 8 HTML files in the directory sample/src/templates/. My goal is to select a button on one of the HTML files. When I tried using angular.elemnt(btn-id).html(), I received an 'un ...

javascriptcssangularjshtmlangularjs-directive

What is preventing me from using AJAX to input data into sqlite?

Implementing a local save feature in my Web App is proving to be quite challenging. Every time I attempt to send data in any form, I consistently encounter the following error: A builtins.TypeError occurs, followed by a stack trace in /SaveFile and jquery ...

javascriptjqueryajaxsqliteflask

Utilizing jQuery to iterate over dynamically generated elements sharing a common class

Whenever I click a button, numerous div elements are dynamically created. <table> <tbody id="ProductDetail"></tbody> </table> These dynamically created divs have an associated Amount value that is added upon creation. funtion ...

javascriptjqueryhtml

Issues with Swiper functionality in Jquery Mobile

I have implemented the Swiper plugin by idangero.us along with jQuery Mobile... In this case, I am utilizing the Scroll Container Swiper for a content slider... However, I am encountering several difficulties when trying to integrate the code... You can ...

jquerycssjquery-mobilejquery-mobile-pageshowswiper.js

Is the z-index problem in Safari related to a transform issue?

I've tried different solutions for similar issues, but I'm struggling to get the text to appear properly on my custom buttons in Safari. They are displaying perfectly in Chrome and Firefox, but not on iOS devices. Does anyone have any suggestion ...

htmlcssbuttonz-index

Creating a multi-dimensional array in order to store multiple sets of data

To generate a multidimensional array similar to the example below: var serviceCoors = [ [50, 40], [50, 50], [50, 60], ]; We have elements with latitude and longitude data: <div data-latitude="10" data-longitude="20" clas ...

javascriptjquery

Using backslashes to escape a JavaScript array elements

How can I modify the code below to properly escape HTML and strings in JavaScript arrays? I've been attempting to use a function called escapeHtml to add the necessary slashes, but it's not functioning as expected. Any help would be appreciated. ...

javascriptarraysescapingaddslashes

Issue with jQuery DataTable: Unable to use column-level filters at the top and maintain a fixed height simultaneously

I am having an issue displaying data in a jQuery DataTable with a column level filter at the top, fixed height, and scroller enabled. Initially, I was able to display the column level filter at the top and it was functioning properly. However, when I set t ...

javascriptjqueryhtmldatatables

The change event for Bootstrap 4 switches is not functioning as expected

I am facing an issue with multiple Bootstrap 4 switches that are dynamically loaded onto the page using JS append. I need to call a function when the switch changes. The example below works fine when the switches are added in HTML, but it doesn't work ...

javascriptjquerybootstrap-4

Issue with Docker Backend Deployment: Unable to Locate '/app/package.json' - Troubleshooting on DigitalOcean

I'm encountering an issue in my deployment logs where there's an error indicating that the package.json file cannot be found. I suspect this may be related to the volumes I've configured, but I'm having trouble pinpointing the problem. ...

javascriptreactjsdockerdeploymentdigital-ocean

Is it possible to overlay a vertical middle on top of an image with an undefined height?

I've been struggling to make this work for the last 24 hours. Initially, I got it working in Chrome using CSS tricks' block:before method, but then realized it didn't function properly in Firefox. I attempted the table method as an alternat ...

htmlcss

Setting the maximum width for all readable text (excluding tables and similar elements)

While I typically avoid using style sheets and similar tools, there is one crucial reason to implement a fixed layout: the importance of maximum text line width for readability. Lines that exceed a certain character count are difficult for humans to read. ...

htmlcss