Как отобразить элемент на странице в другом месте?

Question

[EvgMul]

Здравствуйте, подскажите, пожалуйста, могу ли я средствами css/js изменить порядок отображения элементов не нарушая разметку страницы?
Что я имею ввиду. Например у меня есть такая разметка страницы:

<form id='form1' action="">
		<input type="text">
		<input type="text">
		<textarea name="" id="" cols="30" rows="10"></textarea>
	</form>

	<form id='form2' action="">
		<input type="text">
	</form>

Мне нужно, чтобы такая разметка сохранялась, но форма с id='form2' отображалась перед textarea, но разметка сохранялась исходная.
Подскажите, есть ли такая возможность?
Заранее благодарен всем отозвавшимся.

Comments

[Ragtime Kitty]

А есть какой-то смысл в запрете на изменение структуры?

[EvgMul]

Ragtime_Kitty, нельзя вложить формы друг в друга

[Ragtime Kitty]

EvgMul, не обязательно вкладывать формы же, чтобы сделать то, что вы хотите.

Answer 1

[Ragtime Kitty]

Вы можете расположить все инпуты где и как вам угодно, а потом передавать их в форму через атрибут form

<form id='form1' action=""></form>
<form id='form2' action=""></form>

<div class="inputs">
  <input form="form1" type="text">
  <input form="form2" type="text">
  <textarea form="form1"></textarea>
  <input form="form1" type="text">
</div>

Comments

[EvgMul]

Это то, что нужно, спасибо огромное

Answer 2

[coderisimo]

code.mu/css/order.html

либо грубо , используя жабаскрипт

Answer 3

[m_frost]

ну у тебя же ж эти form будут в чем то лежать там div или чето еще крч добавляеш туда display:flex и
flex-direction: column-reverse; и все проблем нет.
ну или если не можеш менять свойсва контейнера можно через position попробовать но это костыль.

Answer 4

[DanKud]

Оборачиваете формы в <div> и присваиваете ему display: flex;
Затем можно выставлять порядок отображения элементов внутри блока через order:

.wrapper {
  display: flex;
}

#form1 {
  order: 2;
}

#form2 {
  order: 1;
}

<div class="wrapper">
  <form id='form1' action="">
    <input type="text">
    <input type="text">
    <textarea name="" id="" cols="30" rows="10"></textarea>
  </form>
  <form id='form2' action="">
    <input type="text">
  </form>
</div>

Comments

[EvgMul]

Большое спасибо за ответ, но это не совсем то, что мне нужно. Ваше решение отобразить вторую форму выше первой, а мне нужно вторую форму отобразить внутри первой перед textarea.

[Ragtime Kitty]

EvgMul, формы низя друг в друга вкладывать.

[EvgMul]

Ragtime_Kitty, я понимаю, поэтому и вопрос именно в отображении без изменения разметки

[Ragtime Kitty]

EvgMul, без изменения разметки и с сохранением работоспособности форм можно только упарываться с абсолютным позиционированием, но это вообще не круто.