Change the location of an HTML element within the page structure

Question

Change the location of an HTML element within the page structure

Let's consider having 3 elements like this:

<h1>Hello</h1>
<p>hello</p>
<h1>Hello</h1>

I am looking to remove the second <h1> as I only want it to appear once on the page. However, I would like to have flexibility in changing the position of the <h1>. On mobile view, it should be displayed below the <p> and on desktop above. I am aware that this can be achieved with bootstrap/display:none;, but I prefer to adjust the position of a single <h1> based on the scaling of the pages.

Thank you very much for your assistance!

javascript html css

Answer 1

Answer №1

To accomplish this, you have the option of using either flexbox or grid layout. Here's an example using flexbox. If you only want to contain two items, such as <h1> and <p>, you can simply set flex-direction: column-reverse; in the media query instead of changing the order of the elements.

.wrapper {
  display: flex;
  flex-direction: column;
}
.heading {
  order: 1;
}
.text {
  order: 2;
}
@media screen and (max-width: 480px) {
  .heading {
    order: 2;
  }
  .text {
    order: 1;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <div class="wrapper">
    <h1 class="heading">Hello</h1>
    <p class="text">hello</p>
  </div>
</body>
</html>

Answer 2

To accomplish this, you have the option of using either flexbox or grid layout. Here's an example using flexbox. If you only want to contain two items, such as <h1> and <p>, you can simply set flex-direction: column-reverse; in the media query instead of changing the order of the elements.

.wrapper {
  display: flex;
  flex-direction: column;
}
.heading {
  order: 1;
}
.text {
  order: 2;
}
@media screen and (max-width: 480px) {
  .heading {
    order: 2;
  }
  .text {
    order: 1;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
  <div class="wrapper">
    <h1 class="heading">Hello</h1>
    <p class="text">hello</p>
  </div>
</body>
</html>

Answer 3

Answer №2

experiment using the order property along with a media query

@media(max-width:767px){
  .title-section{
    display:flex;
    flex-direction:column;
  }
  h1 { 
    order: 2;
    }  
  p {
     order: 1; 
  }
  
}

<div class="title-section">
<h1>Hello Heading Tag</h1>
<p>hello P Tag</p>
</div>

Answer 4

experiment using the order property along with a media query

@media(max-width:767px){
  .title-section{
    display:flex;
    flex-direction:column;
  }
  h1 { 
    order: 2;
    }  
  p {
     order: 1; 
  }
  
}

<div class="title-section">
<h1>Hello Heading Tag</h1>
<p>hello P Tag</p>
</div>

Change the location of an HTML element within the page structure

Answer №1

Answer №2

Similar questions

The information window is malfunctioning on Google Maps

What is causing the CSS transition to fail in the updated DOM?

PHP Loop creating additional space in recurring section

Loading Ajax dropdown with a preselected value in the dropdown menu

How can I make a div element match the height of an image and overflow without relying on

What is the best way to shade the background when a hyperlink is pressed?

Issue with data type not refreshing in mySQL Workbench

What is causing my navbar's 'ol' element to have a wider width than the

Tips for creating a dynamic curved SVG path

Can you offer advice on creating jasmine tests for an Angular controller and service similar to this?

React: Updating State with the Spread Operator and Array Method to Add Elements to an Array

Altering the appearance of an input field upon submission

What is the best way to verify if an Android permission request has been successfully granted or denied

How can I incorporate a vertical line divider and a legend into a curved box using HTML and CSS?

What is the best way to make this CSS arrow see-through?

Can Jquery use .hover to add a class or Child:hover to impact its parent element?

Next.js experiences slowdown when initializing props on the server side

python scraping: how to extract two nested elements

As the browser window is resized, the gap between images widens while the images themselves decrease

The specified 'image' identifier has not been defined. There is no such member within 'never'