휴대 기기에서 주문 변경

이 부트 스트랩 코드를 만들었습니다. 그러나 나는 어떻게 sm 및 xs 뷰포트가 순서를 변경하는지 파악할 수 없으므로 그림 div가 Headline div 아래로 이동합니다.휴대 기기에서 주문 변경

아무도 내가 어떻게 할 수 있는지 아니?

https://plnkr.co/edit/yDwXuk1mia7JUVVEJ7kY?p=preview

<body class="landingpage"> 
    <div class="background-image" style="background-image: url('http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg?anchor=center&amp;mode=crop&amp;width=2000&amp;height=1200&amp;rnd=131160348720000000');"></div> 
    <div class="top-area" style="border: 4px solid red;"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-sm-4" style="border: 4px solid pink;"> 
      Logo 
      </div> 
      <div class="container"> 
       <div class="row"> 
       <div class="col-sm-12" style="border: 4px solid yellow;"> 
        <p>Picture</p> 
       </div> 
       <div class="col-sm-6 col-sm-pull-6" style="border: 4px solid blue;"> 
        <p class="header-xl center"> 
        HEADLINE TEXT 
        </p> 
        <p class="sub-header center"> 
        Subline text 
        </p> 
       </div> 
       </div> 
      </div> 
    </div> 
    </body> 
</html>

출처

2016-08-18 McDuck4

는 "눈에 보이는-SM"와 "볼-XS"클래스 헤드 라인에서 다른 사업부를 만들고 첫 번째 DIV에 "숨겨진-SM"와 "숨겨진-XS"를 추가

<body class="landingpage"> 
    <div class="background-image" style="background-image: url('http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg?anchor=center&amp;mode=crop&amp;width=2000&amp;height=1200&amp;rnd=131160348720000000');"></div> 
    <div class="top-area" style="border: 4px solid red;"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-sm-4" style="border: 4px solid pink;"> 
      Logo 
      </div> 
      <div class="container"> 
       <div class="row"> 
       <div class="col-sm-12 hidden-sm hidden-xs" style="border: 4px solid yellow;"> 
        <p>Picture</p> 
       </div> 
       <div class="col-sm-6 col-sm-pull-6" style="border: 4px solid blue;"> 
        <p class="header-xl center"> 
        HEADLINE TEXT 
        </p> 
        <p class="sub-header center"> 
        Subline text 
        </p> 
       </div> 
       <div class="col-sm-12 visible-sm visible-xs" style="border: 4px solid yellow;"> 
       <p>Picture</p> 
       </div> 
       </div> 
      </div> 
    </div> 
    </body> 
</html>

편집 : 주석 리카르도 루이즈의 솔루션은 훨씬 더 나은 솔루션

출처

2016-08-18 22:41:54 Cytex01

답변 해 주셔서 감사합니다. 방금 코드를 사용해 보았지만 헤드 라인 위와 헤드 라인 아래에 그림이 있음을 알 수 있습니다. 더 큰 장치에 대해서는 충분히 설명하지 않았습니다. 그것이 Ipad 크기에 도달하면 주문은 정상이어야하며 이는 내 코드가 어떤 의미인지를 의미합니다. 마지막으로 만든 그림 클래스를 삭제할 수 있습니까? – McDuck4

"hidden-sm"및 "visible-sm"클래스를 제거하십시오. 그렇게하면 iPad에서 볼 때 사진이 헤드 라인 위에 표시됩니다. – Cytex01

그것은 나를 위해 지금 의미가 있습니다. 고맙습니다. – McDuck4

@media (max-width: 767px) { 
 
    .sm-col-reorder { display: flex; flex-direction: column; } 
 
    .sm-order-1 { order: 1; } 
 
    .sm-order-2 { order: 2; } 
 
}

<div class="background-image" style="background-image: url('http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg?anchor=center&amp;mode=crop&amp;width=2000&amp;height=1200&amp;rnd=131160348720000000');"></div> 
 
<div class="top-area" style="border: 4px solid red;"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-4" style="border: 4px solid pink;"> 
 
     Logo 
 
     </div> 
 
     <div class="container"> 
 
     <div class="row sm-col-reorder"> 
 
      <div class="col-sm-12 sm-order-2" style="border: 4px solid yellow;"> 
 
      <p>Picture</p> 
 
      </div> 
 
      <div class="col-sm-6 col-sm-pull-6 sm-order-1" style="border: 4px solid blue;"> 
 
      <p class="header-xl center"> 
 
       HEADLINE TEXT 
 
      </p> 
 
      <p class="sub-header center"> 
 
       Subline text 
 
      </p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

0을하다

출처

2016-08-18 22:54:33 Maju

답변 해 주셔서 감사합니다. 그것은 실제로 내가 원하는 것입니다. 여기에 내 코드를 볼 시간이 있다면 : https://plnkr.co/edit/yDwXuk1mia7JUVVEJ7kY?p=preview .. md에 도달하면 사진과 헤드 라인 태그가 서로 옆에있을 것입니다. 이를 코드에 통합 할 수 있습니까? 전 플렉스 방향으로 작동하지 않았습니다 : -/ – McDuck4

플렉스 방향은 다른 블록보다 한 블록 아래에 중요합니다. Flexbox 가이드를 확인할 수 있습니다. [css-tricks] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). 브라우저 호환성도 확인하십시오. 그렇지 않으면 Cytex01의 솔루션이 훨씬 더 뛰어나고 어디에서나 작동해야합니다. – Maju

휴대 기기에서 주문 변경

답변

관련 문제