Изменение положения элементов в зависимости от экрана устройства?

Question

Я хотел получить идею, чтобы решить очень специфическую проблему, с которой я столкнулся.У меня есть дизайн веб-страницы, который в основном показывает что-то вроде этого:

<div class="row">
    <div id="home-img" class="col-6">
    ******An Image Goes Here******
    </div>
    <div class="col-6">
        <div class="row">
            <div id="locate" class="col-12">
           ******Content Here******
            </div>
            <div id="order" class="col-12">
           ******Content Here******
            </div>
        </div>
    </div>
</div>

Я использую Bootstrap 4 для создания веб-сайтов, приведенные выше классы просто для того, чтобы показать, как я структурировал дизайн в моей голове, любые изменения в структуре приветствуютсятак что он может делать то, что мне нужно.

Так что я пытаюсь придумать способ переместить div с id="locate", чтобы быть выше id="home-img", когда я просматриваю сайт на телефоне или планшетено держите id = "order" ниже id="home-image".

Я не могу придумать способ настроить HTML, так что это проще сделать.Мне нужно, чтобы весь раздел был похож на одну строку на рабочем столе, с двумя столбцами, а во втором столбце снова 2 строки;но когда на мобильных устройствах первый столбец находится поверх первого столбца первого ряда.

Я хочу отобразить следующую структуру на экране устройства.

Настольный просмотр.

----------------------------------------
|                      |  Content Here |
|  An Image Goes Here  |----------------
|                      |  Content Here |
----------------------------------------

Мобильный просмотр

------------------------
|  Content Here        |
------------------------
|  An Image Goes Here  |
------------------------
| Content Here         |
------------------------

Answer 1

Я думаю, не возможно перемещение столбца (порядок) из одного ряда в другой.Здесь вы можете попробовать один Jugaad для этого.Вам нужно создать дважды id="home-image" столбец в обеих строках.И затем, вы можете скрыть и показать этот столбец на экране мобильного или рабочего стола, как вы хотите.пожалуйста, попробуйте следующий пример структуры, как вы хотите.

<div class="row">
  <div id="home-img" class="col d-none d-md-block"> ****** An Image Goes Here ****** </div>
  <div class="col">
    <div class="row">
      <div id="locate" class="col-12"> ****** Locate Content Here****** </div>
      <div id="home-img" class="col-12 d-block d-md-none"> ****** An Image Goes Here ****** </div>
      <div id="order" class="col-12"> ****** Order Content Here****** </div>
    </div>
  </div>
</div>

Answer 2

Вы можете использовать свойство order внутри медиазапроса .

.проблема в том, что #locate находится внутри .row внутри .col-6, а order будет применяться только к элементам sibling .Таким образом, вы должны применить его к самому .col-6.К счастью, ваш #home-img имеет более высокую специфичность , чем простой .col6, поэтому он переопределит другой селектор.

Это можно увидеть в следующем,где #locate стоит на первом месте для мобильных телефонов, а #home-image на первом месте для настольных компьютеров (нажмите Run code snippet, а затем Full page, чтобы увидеть вид на рабочем столе):

@media screen and (max-width: 768px) {
  .col-6 {
    order: 1;
  }
  
  #home-img {
    order: 2;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div id="home-img" class="col-6">
    home-img
  </div>
  <div class="col-6">
    <div class="row">
      <div id="locate" class="col-12">
        locate
      </div>
      <div id="order" class="col-12">
        order
      </div>
    </div>
  </div>
</div>

И обратите внимание, что если вы хотите, чтобы элементы складывались на мобильном устройстве, вы можете использовать col-md-6 и col-sm-12 вместо простого col-6класс:

@media screen and (max-width: 768px) {
  .col-6 {
    order: 1;
  }
  
  #home-img {
    order: 2;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div id="home-img" class="col-md-6 col-sm-12">
    home-img
  </div>
  <div class="col-md-6 col-sm-12">
    <div class="row">
      <div id="locate" class="col-12">
        locate
      </div>
      <div id="order" class="col-12">
        order
      </div>
    </div>
  </div>
</div>