CSS로만 DIV 위치 바꾸기

CSS로만 DIV 위치 바꾸기

---

div반응 형 디자인을 위해 두 개의 위치를 바꾸려고합니다 (사이트는 브라우저 너비에 따라 다르게 보임 / 모바일에 적합 함).

지금은 다음과 같습니다.

<div id="first_div"></div>
<div id="second_div"></div>

그러나 second_divCSS 만 사용하여 첫 번째 처럼 보이도록 배치를 바꿀 수 있습니까? HTML은 동일하게 유지됩니다. 나는 수레와 물건을 사용해 보았지만 내가 원하는 방식으로 작동하지 않는 것 같습니다. 의 높이 div가 항상 변하기 때문에 절대 위치 지정을 사용하고 싶지 않습니다 . 해결책이 있습니까, 아니면이를 수행 할 방법이 없습니까?

---

누군가가 나에게 연결이 : 어떤 응답 디자인의 위에서 아래로에의 요소를 이동하는 가장 좋은 방법입니다 .

그 솔루션은 완벽하게 작동했습니다. 이전 IE를 지원하지는 않지만 모바일에 반응 형 디자인을 사용하고 있기 때문에 중요하지 않습니다. 그리고 대부분의 모바일 브라우저에서 작동합니다.

기본적으로 다음과 같습니다.

@media (max-width: 30em) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .first_div {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }

  .container .second_div {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

이것은 나에게 수레보다 더 잘 작동했습니다. 왜냐하면 그것들을 서로 쌓아야했고 위치를 바꿔야하는 약 5 개의 div가 있었기 때문입니다.

---

이 질문은 이미 큰 답을 가지고 있지만 여기에서 모든 가능성을 탐구하는 정신으로 절대 위치 지정 방법과 달리 dom 요소를 여전히 공간을 차지할 수 있도록하는 또 다른 기술입니다.

이 방법은 모든 최신 브라우저와 IE9 + (기본적으로 display : table을 지원하는 모든 브라우저)에서 작동하지만 최대 3 개의 형제에서만 사용할 수 있다는 단점이 있습니다.

//the html    
<div class='container'>
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
</div>

//the css
.container {
   display:table;    
}
.div1 {
    display:table-footer-group;
}
.div2 {
    display:table-header-group;
}
.div3 {
    display:table-row-group;
}

이렇게하면 요소가 1,2,3에서 2,3,1로 재정렬됩니다. 기본적으로 표시가 table-header-group으로 설정된 모든 항목은 상단에 배치되고 table-footer-group은 하단에 배치됩니다. 당연히 table-row-group은 요소를 중간에 둡니다.

이 방법은 빠른 지원과 함께 빠르고 flexbox 접근 방식보다 훨씬 적은 CSS를 필요로하므로 예를 들어 모바일 레이아웃을 위해 몇 가지 항목 만 교체하려는 경우이 기술을 배제하지 마십시오.

codepen에서 라이브 데모를 확인할 수 있습니다 : http://codepen.io/thepixelninja/pen/eZVgLx

---

The accepted answer worked for most browsers but for some reason on iOS Chrome and Safari browsers the content that should have shown second was being hidden. I tried some other steps that forced content to stack on top of each other, and eventually I tried the following solution that gave me the intended effect (switch content display order on mobile screens), without bugs of stacked or hidden content:

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

.section1,
.section2 {
  height: auto;
}

---

Using CSS only:

#blockContainer {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
#blockA {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#blockB {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;

}

<div id="blockContainer">
 <div id="blockA">Block A</div>
 <div id="blockB">Block B</div>
 <div id="blockC">Block C</div>
</div>

http://jsfiddle.net/thirtydot/hLUHL/

---

Assuming Nothing Follows Them

If these two div elements are basically your main layout elements, and nothing follows them in the html, then there is a pure HMTL/CSS solution that takes the normal order shown in this fiddle and is able to flip it vertically as shown in this fiddle using one additional wrapper div like so:

HTML

<div class="wrapper flipit">
   <div id="first_div">first div</div>
   <div id="second_div">second div</div>
</div>

CSS

.flipit {
    position: relative;
}
.flipit #first_div {
    position: absolute;
    top: 100%;
    width: 100%;
}

This would not work if elements follow these div's, as this fiddle illustrates the issue if the following elements are not wrapped (they get overlapped by #first_div), and this fiddle illustrates the issue if the following elements are also wrapped (the #first_div changes position with both the #second_div and the following elements). So that is why, depending on your use case, this method may or may not work.

For an overall layout scheme, where all other elements exist inside the two div's, it can work. For other scenarios, it will not.

---

In some cases you can just use the flex-box property order.

Very simple:

.flex-item {
    order: 2;
}

See: https://css-tricks.com/almanac/properties/o/order/

---

This solution worked for me:

Using a parent element like:

.parent-div {
    display:flex;
    flex-direction: column-reverse;
}

In my case I didn't have to change the css of the elements that I needed to switch.

참고URL : https://stackoverflow.com/questions/17455811/swap-div-position-with-css-only