WordPress - ShortCode 열의 모바일 스태킹 순서

Question

이것은 매우 간단하지만 나를 괴롭 히고 있습니다.

저는 Wordpress 테마로 작업 중이며 Bootstrap 라이브러리의 스타일을 기반으로하는 Shortcodes Ultimate 플러그인을 사용하고 있습니다. 나는 초보자인데 부트 스트랩에 관해서는 모바일/태블릿 장치 (< 770px)에서 요소를 다시 정렬하는 데 도움이 필요했습니다.

기본적으로 데스크톱 버전의 화면 왼쪽에는 <h2>과 <p>이 있고 오른쪽에는 <img> (이미 있습니다)이 있습니다.

뷰포트 너비가 < 770px 일 때 <h2> 및 <p> 상단에 <img>을 넣고 싶습니다. 그러나 현재 일어나는 것은 이것의 반대

[div] 
    [div] 
     <h2>Our Roots</h2> 
     <p>Some text</p> 
    [/div] 
    [div] 
     <img src="some-image.png"> 
    [/div] 
[/div] 

Answer 1

는 IMG가 높은 div에 이동 및 데스크탑 뷰의 오른쪽에 떠있는 풀 권리를 사용 :(이다.

Answer 2

당신은 @media 호출을 사용할 수 있습니다

및 각 상황에 맞는 맞춤 CSS를 만들고 첫 번째 상황에 대해 왼쪽으로 당기고 당겨받을 수있는 클래스를 사용하십시오.

Answer 3

내가 뭘했는지 완벽하게 작동하는 반응을 보냈던 모든 분들께 감사드립니다.

[div] 
    [div] 
     <img src="some-image.png" class="mobile"> 
     <h2>Our Roots</h2> 
     <p>Some text</p> 
    [/div] 
    [div] 
     <img src="some-image.png" class="desktop"> 
    [/div] 
[/div] 

나는 기본적으로 그냥 두 번 이미지를 배치하고이 CSS 적용 :

.mobile { 
    display: none; 
} 

@media screen and (max-width 770px) { 
    .mobile { 
    display: block; 
    } 
    .desktop { 
    display: none; 
    } 
} 

여전히