HTML Custom Order?

Question

I'm looking (for debugging purposes) for an example where text A appears before text B in HTML Code while B appears before A when being rendered in Browser.

An example that doesn't work:

<h1>A</h1>
<h1>B</h1>

Preferably 2 examples one using JS and one not using JS at all.

One try:

div.absolute {
    position: absolute;
    border: 3px solid #73AD21;
  }

<div class="absolute">
  This div element has position: absolute;
</div>

<p> test </p>

You can do it in CSS with `position: absolute` and then appropriate values for `top:` — Barmar, Aug 25 '22 at 16:39
But why the downvote, I clearly stated I'm new to HTML and didn't hear of `position: absolute` before and had no chance to discover it on my own... — john, Aug 25 '22 at 16:39
I didn't downvote, but votes reflect the quality of the question, not the questioner. — Barmar, Aug 25 '22 at 16:41
i guess the downvoter thought you should have done a bit of research before the question. — Isaac Ikusika, Aug 25 '22 at 16:42
It doesn't contain any code that we can help you fix, it's just asking us to write it for you. — Barmar, Aug 25 '22 at 16:42
position: absolute didn't work for me (they overlap), can you show example — john, Aug 25 '22 at 16:43
It didn't work because you didn't set any position(s) for anything. A tutorial might be a more appropriate starting point. — Dave Newton, Aug 25 '22 at 16:48
Please revise your post title to ask a clear, specific question. See [ask]. — isherwood, Aug 25 '22 at 16:52
See [How can I reorder my divs using only CSS?](https://stackoverflow.com/q/220273/1264804) and [How can I reorder elements with JavaScript?](https://stackoverflow.com/q/558614/1264804). — isherwood, Aug 25 '22 at 16:58

score 1 · Accepted Answer · edited Aug 25 '22 at 16:55

1

If you mean changing the orders you can try order property:

.flex {
  display: flex;
  flex-direction: column;
}

h1#foo {
  order: 2;
}

h1#bar {
  order: 1;
}

<div class="flex">
  <h1 id="foo">A</h1>
  <h1 id="bar">B</h1>
</div>

edited Aug 25 '22 at 16:55

isherwood

58,414
16
114
157

answered Aug 25 '22 at 16:47

AG_1380

552
5
12

`colum-reverse` the flex-direction would do I suppose. – Michel Aug 25 '22 at 16:49
@Michel yeah and there are multiple solutions. – AG_1380 Aug 25 '22 at 16:50

Michel · Answer 2 · 2022-08-25T17:22:39.487

0

Using CSS flex with direction column-reverse

.container {
  display: flex;
  flex-direction: column-reverse;
}

<div class="container">
  <h1>A</h1>
  <h1>B</h1>
</div>

Or javascript, using insertBefore() to place B before A.

document.getElementById("A").parentNode.
insertBefore(
  document.getElementById("B"),
  document.getElementById("A")
);

<h1 id="A">A</h1>
<h1 id="B">B</h1>

edited Aug 25 '22 at 17:22

answered Aug 25 '22 at 16:51

Michel

4,076
4
34
52

HTML Custom Order?

2 Answers2