다른 요구 사항으로 인해 HTML을 수정할 수없는 템플릿이 주어진 경우 HTML 에서 순서가 div다른 div경우 HTML을 다른 형식 으로 표시 (재배치)하는 방법은 무엇입니까? 두 가지 모두 div높이와 너비가 다른 데이터를 포함합니다.

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

바라는 결과는 다음과 같습니다.

Content to be above in this situation
Content to be below in this situation
Other elements

치수가 고정되면 필요한 위치에 쉽게 배치 할 수 있지만 내용이 가변적 인 경우 몇 가지 아이디어가 필요합니다. 이 시나리오를 위해 너비를 모두 100 %로 고려하십시오.

특히 CSS 전용 솔루션을 찾고 있습니다 (확장되지 않으면 다른 솔루션을 사용해야 할 것입니다).

다음에 다른 요소가 있습니다. 내가 제시 한 제한된 시나리오를 감안할 때 좋은 제안이 언급되었습니다. 이것이 최선의 대답 일 수도 있지만이 요소를 따르는 요소가 영향을받지 않도록하려고합니다.

답변

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }

<div id="flex">
   <div id="a">A</div>
   <div id="b">B</div>
   <div id="c">C</div>
</div>

$('#secondDiv').insertBefore('#firstDiv');

$('.swapMe').each(function(i, el) {
    $(el).insertBefore($(el).prev());
});

/* -- Where the Magic Happens -- */

.container {

  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;

}


/* -- Styling Only -- */

.container > div {
  background: red;
  color: white;
  padding: 10px;
}

.container > div:last-of-type {
  background: blue;
}

<div class="container">

  <div class="first">

     first

  </div>

  <div class="second">

    second

  </div>

</div>

#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }

<style>
#firstDiv {
    position:absolute; top:100%;
}
#wrapper {
    position:relative;
}

#wrapper {
  display: flex;
  flex-direction: column;
}
#firstDiv {
  order: 2;
}

<div id="wrapper">
  <div id="firstDiv">
    Content1
  </div>
  <div id="secondDiv">
    Content2
  </div>
</div>