CODEWITHSUNDEEP
javascriptcssgoogle-tag-manager
Spacejockey
Spacejockey

Reputation: 408

Switching the position of two HTML elements with Javascript/CSS

We have a few HTML elements near the bottom of our page that aren't being used much. We want to do some testing with Google Tag Manager to switch these elements with some that are near the top of the page. Is it possible with plain JS or CSS to switch the position of two HTML elements? For example, let's say I want to switch the positions of div1 and div3:

<div class="container">
  <div class="div1">
    <span>1</span>
  </div>
  <div class="div2">
    <span>2</span>
  </div>
  <div class="div3">
    <span>3</span>
  </div>
</div>

Upvotes: 1

Views: 573

Answers (1)

Abin Thaha
Abin Thaha

Reputation: 4633

You can use the flexbox of css like this to switch the positions of child contents.

.container {
  display: flex;
}

.div1 {
  order: 3;
}

.div3 {
  order: 1;
}

.div2 {
  order: 2;
}
<div class="container">
  <div class="div1">
    <span>1</span>
  </div>
  <div class="div2">
    <span>2</span>
  </div>
  <div class="div3">
    <span>3</span>
  </div>
</div>

Upvotes: 3

Related Questions