Is there a way to rearrange html elements using media queries?

Here is a snippet of code showcasing how my website is structured for both desktop and mobile views.

Display on Desktop

<body>
    <div>
    <header>
        <div>example</div>
        <a><img src"my logo is here"/></a>
        <div>example</div>
        <nav>classic-menu</nav>
    </header>
    </div>
</body>



Display on Mobile

<body>
    <div>
    <nav>menu responsive</nav>-------> when the menu goes into dropdown, all header content follows the menu

    <header>
        <div>example</div>
        <a><img src"my logo is here"/></a>----->wrong logo position appears when you open the responsive menu
        <div>example</div>
    </header>
    </div>
</body>

I am looking to see if I can use media queries to rearrange the current order of elements in the HTML to correct the logo's position in the responsive view.

Answer №1

@media only screen and (max-width: 600px) {
    #flex { display: flex; flex-direction: column; }
    #a { order: 2; }
    #b { order: 1; }
    #c { order: 3; }
}
Give this a try:

<div id="container">
   <div id="a">A</div>
   <div id="b">B</div>
   <div id="c">C</div>
</div>

To find out more, visit this link

Answer №2

If you want to display different content for desktop and mobile, you can create two separate html <div> elements and use media queries to control their visibility based on the screen size. Check out this example on this JSFiddle link.

.mobile {
    display: none;
}
.mobile > h3 {color: blue;}
@media (max-width: 600px) {
    .mobile {
        display: inline;
    }
    .desktop {
        display: none;
    }
}

Answer №3

One option to consider is using CSS tables, which come with predefined display options that can help maintain a specific order (such as table-caption before table-cell):

div { display: table }
header { display: table-cell }
nav { display: table-caption }

Check out this JSFiddle for a visual demonstration!.

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

Tips for extracting data from an Angular object using the *ngFor directive

https://i.stack.imgur.com/ai7g1.png The JSON structure displayed in the image above is what I am working with. My goal is to extract the value associated with the key name. This is the approach I have taken so far: <span *ngFor="let outlet of pr ...

Guide on implementing automatic callbacks with AJAX

I am facing an issue with my index page that has one input tag and one division. There is an ajax function that retrieves data from the server, but I am encountering a problem. When I enter a single letter, it returns 3 records. Then, if I add another lett ...

Loading screen for specific content within the current WordPress theme

I am trying to display a preloader only in the 'content' div, but it ends up hiding the entire page. The structure of the site is as follows: Title Menu Content (where I want the preloader) Footer I'm having trouble figuring out where exa ...

Having issues with Firefox rendering JavaScript and CSS correctly

I'm trying to figure out if it's the row class from Bootstrap that's causing issues, or if there's a problem with my JS/CSS not loading properly in Firefox. It seems to be working fine in Chrome and Safari. Any ideas on what could be go ...

What are my choices for showcasing hierarchical information?

I'm currently working on organizing hierarchical data using HTML, JS, and jQuery. My chosen method involves utilizing a left-floated div container system in place of a grid system for easier recursive code generation. One challenge I've encounter ...

Aptana Studio 3 fails to detect PHP code embedded within an .html file

When writing code, such as: <!DOCTYPE html> <html> <body> <?php echo "My first PHP script!"; ?> </body> </html> After <?php, I am encountering a red X icon error indicating that a ">" is missing at the end of t ...

Add a unique CSS style to both text and image using anchor tags

Why isn't the hover effect of color transition and underline being applied to the image? It seems to only work for text. While I understand that the color transition may require a change in image color, shouldn't the underline still occur? This ...

Limits in exporting data from an html table to a pdf document

The output on the page only displays 17 out of 60+ rows of data. I've searched online for a javascript function to help with this, but unfortunately, I couldn't find one. Here is a sample code snippet: <script type="text/javascript"> ...

Tips for deleting "Category: [category name]" in Wordpress

I have attempted various solutions found in previous threads, but none of them seem to work for me. Here is a screenshot I am looking to remove the text from the header in the category and only display [category name]. Can anyone assist me with this, ple ...

When an external image is dragged over, include the class in the drop area of the file input

Hey, does anyone know how to use Jquery to add a class when an element is being dragged over a drop area? Here's the HTML code I'm working with: <div class="upload"> <form action=""> <input class="uploadfile" type="file" ...

CSS containers not lining up correctly

Currently in the process of developing a web application, I am facing challenges with my CSS panels constantly shifting around unexpectedly. These panels feature an image with a 4:3 aspect ratio along with a description section. While they appear stable ...

"Can anyone provide guidance on how to initiate a css 3d animation by clicking a button

Currently, I am developing a folding hide/show animation that can be triggered using Javascript. If you would like to take a look at the code and see a working example, please visit this link: You can also view just the gist here: https://gist.github.com ...

Preventing context menu from appearing on a right click by implementing a trigger to re-enable it

I am looking to implement a functionality on my website that disables the right click menu. Currently, I have achieved this through the following code: document.addEventListener("contextmenu", function(e){e.preventDefault(); }, false); Now, I am wonderin ...

The height of the div element is automatically adjusted to zero

I am dealing with a simple layout where I have a main div that floats to the left. Within this main div, I nest other divs using the clear both style. Below is a simplified version of my setup: <div id="wrapper" class="floatLeft"> <div id="ma ...

When I attempt to view my calendar in a modal popup, the opening action causes it

Recently, I encountered an issue with the bootstrap datepicker in a modal pop-up. The problem arises when it gets cut off unexpectedly. I am seeking suggestions or solutions to resolve this inconvenience. <input id="doohMediaStartDate" name="startDate" ...

Top tip for combating form misuse in Django applications

Is there a reliable method to restrict form submissions in Django? I need the form to be submitted a maximum of 5 times from the same IP address within one hour. Can this restriction be implemented in Django? I experimented with Django Ratelimit, but unfo ...

Tips for positioning the text and icon within a tag nestled in a paragraph tag?

Need help aligning text and icons inside paragraph tags on a tag. Here is the HTML code I'm currently using: <div class="application-intro"> <p><a class="btn" href=""><i clas ...

Exploring Browser History using Cascading Style Sheets

Currently, I am in need of researching a topic for my University project. Unfortunately, the internet has not provided me with any information on this specific subject. The task at hand is as follows: "How and under what circumstances can one uncover ...

What is the best way to style only textboxes with CSS without affecting other input types such as checkboxes?

If attribute selectors were universally supported by all browsers, we could effortlessly implement the following styling: input[type='text'] { font:bold 0.8em 'courier new',courier,monospace; } input[type='radio'] { margin:0 ...

Adjustable / consistent box height

For hours, I've been attempting to make some divs the same height. Check out my JSfiddle here: https://jsfiddle.net/4cj5LbLs/15/ I experimented with using display: table; in the parent element and either display: table-cell; or display: table-colum ...