Изменить порядок на мобильных устройствах

Я сделал этот код начальной загрузки. Но я не могу понять, как я на sms и xs видоискатели меняют порядок, поэтому div-образ идет под заголовком Headline.Изменить порядок на мобильных устройствах

Кто-нибудь знает, как я могу это сделать?

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

Создайте еще один DIV под заголовком с «видимыми-см» и «видимый-хз» классом и добавить «скрытые-см» и «скрытый-хз» на первый DIV

<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>

EDIT: Решение Рикардо Руис в комментариях является гораздо лучшим решением

источник

2016-08-18 22:41:54 Cytex01

Большое спасибо за ваш ответ. Я просто попробовал код, но я вижу, что над заголовком и под заголовком есть надпись. Я не описал это достаточно с более крупными устройствами. Когда он достигает размера Ipad, порядок должен быть нормальным, а это значит, что мой код. Могу ли я удалить последний класс Picture, который вы сделали? – 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>

источник

2016-08-18 22:54:33 Maju

Большое спасибо за ваш ответ. На самом деле это то, что мне хотелось бы. Если у вас есть время, чтобы посмотреть на мой код здесь: https://plnkr.co/edit/yDwXuk1mia7JUVVEJ7kY?p=preview .. Когда он достигнет md, тег изображения и заголовка будет находиться рядом друг с другом. Могу ли я включить это в свой код? Я не работал с гибким направлением раньше: -/ – McDuck4

flex-direction важно там, чтобы иметь один блок ниже другого. Вы можете проверить руководство по гибкой линии, например. [CSS-уловок] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). Пожалуйста, проверьте совместимость с браузерами, что это хорошо для вас. В противном случае решение Cytex01 намного лучше и должно работать везде. – Maju

Изменить порядок на мобильных устройствах

ответ

Смежные вопросы