Как изменить порядок начальной загрузки мобильных телефонов? - PullRequest
Новая
       9

Как изменить порядок начальной загрузки мобильных телефонов?

0 голосов
/ 27 июня 2019

У меня на рабочем столе 4 столбца, как показано ниже, и я бы хотел, чтобы они переупорядочились таким образом, чтобы это выглядело так, как показано ниже на мобильном телефоне. Нужна ли для этого нестандартная CSS?

(пока не могу опубликовать изображения, вот ссылка на изображение :) https://imgur.com/a/sasLETe

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

Текущий HTML: 

<div class="row">
  <div class="col-md-6 col-sm-12">
    <div>A</div>
    <div>C</div>
  </div>
  <div class="col-md-6 col-sm-12">
    <div>B</div>
    <div>D</div>
  </div>
</div>

Я бы хотел, чтобы он вел себя так, как я изображал на картинке.

Как мне это сделать? Я не хочу прибегать к JavaScript. Любая помощь приветствуется.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 27 июня 2019

Вы можете использовать этот код, только для начальной загрузки 

<section>
    <div class="container my-5">
      <div class="row">
        <div class="col-md-6">A</div>
        <div class="col-md-6">B</div>
      </div>
      <div class="row">
        <div class="col-md-6">c</div>
        <div class="col-md-6">d</div>
      </div>
    </div>

  </section>
0 голосов
/ 27 июня 2019

Если вы играете со своей HTML-структурой, вам не нужно иметь пользовательские CSS Просто обновите классы и контент в вашем коде следующим образом: 

<div>
    <div class="row">
        <div  class="col-md-6 col-sm-12">A</div>
        <div  class="col-md-6 col-sm-12">B</div>
     </div>
     <div class="row" >
        <div class="col-md-6 col-sm-12">C</div>
        <div class="col-md-6 col-sm-12">D</div>
     </div>
</div>
```
...