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

"How to retrieve data from a nested object in MongoDB by referencing variables

Error message received from Express middleware: "Unable to modify headers after they have been sent."

Ensuring proper execution of the next callback function in an Express get request

How can I utilize the parseFloat feature within my dedicated parseFloat function located in an angular factory?

Next.js has a problem where it displays incorrect data when users navigate rapidly between pages

What is the best way to symbolize a breadcrumb offspring?

Using R Markdown and Hugo to Style Blog Titles

Is there a way to merge all this data into a single Object?

Signing out in React js

Creating form inputs dynamically in HTML and then sending them to a PHP script programmatically

Discover the Elements that have been incorporated through the use of JavaScript

Email Template not rendering properly across various platforms

Avoiding the use of numbers in v-if in Vue.js

The element type provided is not valid: it is expected to be a string (for built-in components) or a class/function (for composite components) but instead it is undefined. This error

Utilizing LocalStorage in an Ionic application to store data on a $scope

How can the error within a promise be captured when using resolve()?

The Dilemma of jQuery Dragging and Resizing Clash

What is the process for opening a local HTML file in IE compatibility mode?

Error Encountered: Angular - Despite successful $http.delete request, the operation does not actually take

Populate the dropdown menu with data from a JSON file