Как правильно оформить заказ в мобильных колонках? - PullRequest
Новая
       10

Как правильно оформить заказ в мобильных колонках?

0 голосов
/ 04 июня 2018

У меня проблема с веб-сайтом WordPress для мобильных устройств.У меня есть несколько разделов со следующим расположением.

Содержимое левой стороны и изображение правой стороны (Первая часть)
Изображение правой стороны и Содержание левой стороны (вторая часть)

В мобильной версии разделы идут в том же порядке (Контент -> Изображение | Изображение -> Контент).

Но я хочу, чтобы для второго раздела в мобильном представлении расположение было совершенно противоположным.

Изображение -> Содержание |Image -> content

Мне нужен такой макет в мобильном телефоне:

I want a layout like this in mobile

Макет в настольной версии:

Layout in desktop version

Как я могу решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

Вы можете использовать концепцию самозагрузки push and pull.Пожалуйста, проверьте следующий код и вывод или проверьте мой codepen . 

.box {
  background: #fff000;
  margin: 10px 0;
  height: 200px;
  }
  
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 push-md-6"><div class="box">Image</div></div>
<div class="col-md-6 pull-md-6"><div class="box">Content</div></div>
<div class="col-md-6"><div class="box">Image</div></div>
<div class="col-md-6"><div class="box">Content</div></div>
</div>
</div>
</body>
</html>
0 голосов
/ 04 июня 2018

Либо вы можете использовать систему сетки начальной загрузки для этих div или использовать медиа-запрос для них специально для мобильных устройств.

Я думаю, что система сетки будет легкой. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">


<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-6">
      First columns
    </div>
    <div class="col-sm-6 col-md-6">
      Second columns
    </div>
    <div class="col-sm-6 col-md-6">
      Third columns
    </div>
    <div class="col-sm-6 col-md-6">
      Fourth columns
    </div>
</div>
...